Spinner & Loading

Last updated: 4 months ago

Category: Data

SPIN is a static buffer, indicating that data or resources are being loaded, prompting the user to wait; this buffer supports multi-subject colors and dark mode inversion.

Implementation Methods for Spinners

There are currently three ways to implement spinners:

1. Directly use the oc-spin custom tag, which is essentially a :before pseudo-element;
2. Use --_spin and --_spin-dk CSS variables as background images (e.g., background:var(--_spin)), which are essentially SVG images;
3. For elements populated via AJAX, you can additionally use the ._spin-block, ._spin-flex, or ._spin-inline style classes, which are also :before pseudo-elements;

Inverted (Dark Mode)

For dark backgrounds, there are three corresponding inverted spinner variants:

1. Use the oc-spin custom tag with the inverted attribute;
2. Use the --_spin-dk CSS variable as background image;
3. Use the ._spin-block-dk, ._spin-flex-dk, or ._spin-inline-dk style classes;

Usage Recommendations

The three spinner implementations have different structures and styles to accommodate various usage scenarios:

• If the parent element has permission to insert content, you can directly insert the oc-spin custom tag;
• If the parent element doesn't have permission to insert content, you can add style classes;
• If users need custom modules and write their own CSS, they can directly use the spinner variables;

Basic Usage

The custom tag oc-spin represents a loading spinner with a default size of 32px, which can be modified as needed.

Color Themes

Modify the spinner's color theme using the theme attribute. Available theme colors include: prim (default), error, succ, info, warn, issue, text, brief, and caption.

Sizes

Set the size using the size attribute:

• sm: Small size (14px)
• md: Medium size (32px, default)
• lg: Large size (56px)

Custom Sizing

You can directly modify the width style to change its size, or modify its own --_spin-sz variable.

Usage in Custom Buttons

Spinners can be freely used within oc-btn tags.

Usage in Native Buttons

Spinners can be inserted into any node as regular HTML, including native button elements.

Attributes

Name	Possible Values	Default	Description
size	'sm'/'md'/'lg'	'md'	Size (sm=14px, md=32px, lg=40px)
theme	'prim'/'error'/'succ'/'info'/'warn'/'issue'/'text'/'brief'/'caption'	'prim'	Color theme (defaults to primary)
inverted	-	-	Color inversion for dark backgrounds