Loader
Use loaders to indicate to users that something is in progress and still needs to complete.
| Class | Type | |
|---|---|---|
loader
|
Loader | A class representing a loader |
Small Loader
Remove base border color
| State Class | Type | |
|---|---|---|
is-transparent
|
Remove Circle color | Base color of loading change to transparent |
Loading precent state
Work different from the other rotate loaders.
| State Class | Type | |
|---|---|---|
is-loading
|
Loading | Change behaving from rotating to loading |
| param | represents | Example: |
|---|---|---|
--loading
|
Loading precent |
--loading: 65%;
|
-loader-bg-color-light
|
inner circle color (light-mode) that will fit background-color of the container |
--loader-bg-color-light: var(--color-neutral-5);
|
-loader-bg-color-dark
|
inner circle color (dark-mode) that will fit background-color of the container |
--loader-bg-color-dark: var(--color-neutral-100);
|
class="loader is-loading"
style="--loading:65%; --loader-bg-color-light:var(--color-neutral-5); --loader-bg-color-dark:var(--color-neutral-100);"
>