An animated loading indicator.
<div class="sp"></div> <div class="sp sp-sm sp-teal"></div> <div class="sp sp-lg sp-purple"></div> <!-- Inline with text --> <div class="sp-wrap"> <div class="sp sp-sm"></div> Loading... </div>
Installation
Built with pure HTML and CSS. Include ds-shared.css in your project.
pnpm add @norbielink/ds
Examples
Inline with text
Loading components...
Saving changes...
Publishing...
<div class="sp-wrap"> <div class="sp sp-sm sp-teal"></div> Loading... </div>
API Reference
Classes
| Class | Description |
|---|---|
sp | Default 32px black spinner |
sp-sm | Small 20px variant |
sp-lg | Large 48px variant |
sp-teal | Purple (#A614C3) color |
sp-purple | Purple (#C084FC) color |
sp-dk | Dark mode variant (white tones) |
sp-wrap | Flex row with spinner + label text |