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 |
<div class="loader"></div>
Small Loader
<div class="loader is-small"></div>
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);
|
<div
class="loader is-loading"
style="--loading:65%; --loader-bg-color-light:var(--color-neutral-5); --loader-bg-color-dark:var(--color-neutral-100);"
></div>