Spinners
Classes Information
| ClassName | Description |
|---|---|
| spinner-simple | simple |
| spinner-circle | circle |
| spinner-dot-intermittent | with dots intermittent |
| spinner-pulse-dot | pulse dot |
| spinner-ring | ring |
| spinner-wave | wave |
| spinner-wave-dot | wave dot |
| spinner-dot-circle | dot circle |
| spinner-primary | primary color |
| spinner-secondary | secondary color |
| spinner-success | success color |
| spinner-error | error color |
| spinner-warning | warning color |
| spinner-sm | small size |
| spinner-md | medium size |
| spinner-lg | large size |
| spinner-xl | extra large size |
Basic Usage
Example Code
html
<div class="spinner-simple"></div>Colors
Example Code
html
<div class="flex flex-row">
<svg
class="spinner-ring spinner-primary"
viewBox="25 25 50 50"
stroke-width="5"
>
<circle cx="50" cy="50" r="20" />
</svg>
<svg
class="spinner-ring spinner-secondary"
viewBox="25 25 50 50"
stroke-width="5"
>
<circle cx="50" cy="50" r="20" />
</svg>
<svg
class="spinner-ring spinner-success"
viewBox="25 25 50 50"
stroke-width="5"
>
<circle cx="50" cy="50" r="20" />
</svg>
<svg
class="spinner-ring spinner-error"
viewBox="25 25 50 50"
stroke-width="5"
>
<circle cx="50" cy="50" r="20" />
</svg>
<svg
class="spinner-ring spinner-warning"
viewBox="25 25 50 50"
stroke-width="5"
>
<circle cx="50" cy="50" r="20" />
</svg>
</div>Sizes
Example Code
html
<div class="flex flex-row">
<svg class="spinner-ring spinner-primary spinner-sm" viewBox="25 25 50 50" stroke-width="5">
<circle cx="50" cy="50" r="20" />
</svg>
<svg class="spinner-ring spinner-primary spinner-md" viewBox="25 25 50 50" stroke-width="5">
<circle cx="50" cy="50" r="20" />
</svg>
<svg class="spinner-ring spinner-primary spinner-lg" viewBox="25 25 50 50" stroke-width="5">
<circle cx="50" cy="50" r="20" />
</svg>
<svg class="spinner-ring spinner-primary spinner-xl" viewBox="25 25 50 50" stroke-width="5" >
<circle cx="50" cy="50" r="20" />
</svg>
</div>Circle
Example Code
html
<!-- circle spiner -->
<div class="spinner-circle"></div>
<!-- Ring -->
<svg class="spinner-ring" viewBox="25 25 50 50" stroke-width="5">
<circle cx="50" cy="50" r="20" />
</svg>Dot
Example Code
html
<!-- Dot Intermitten -->
<div class="spinner-dot-intermittent"></div>
<!-- Dot Pulse -->
<div class="spinner-dot-pulse">
<div class="spinner-pulse-dot"></div>
</div>
<!-- Dot Wave -->
<div class="spinner-wave">
<div class="spinner-wave-dot"></div>
<div class="spinner-wave-dot"></div>
<div class="spinner-wave-dot"></div>
<div class="spinner-wave-dot"></div>
</div>
<!-- Dot Circle -->
<div class="spinner-dot-circle">
<div class="spinner-dot"></div>
<div class="spinner-dot"></div>
<div class="spinner-dot"></div>
<div class="spinner-dot"></div>
<div class="spinner-dot"></div>
<div class="spinner-dot"></div>
<div class="spinner-dot"></div>
<div class="spinner-dot"></div>
</div>