Spinner: Large (page)

Ready

HTML
View
Context
Info
Notes


        
        <div class="d-flex align-items-center gap-2">
    <div class="spinner-border " style="color:var(--primary-color);width:48px;height:48px;" role="status">
        <span class="visually-hidden">Loading…</span>
    </div>
    <span style="font-family:'Satoshi';color:var(--paragraph);font-size:0.875rem;">Loading your scripts…</span>
</div>


        <div class="d-flex align-items-center gap-2">
  <div class="spinner-border {{size}}" style="color:var(--primary-color);width:{{px}}px;height:{{px}}px;" role="status">
    <span class="visually-hidden">Loading…</span>
  </div>
  {{#if label}}<span style="font-family:'Satoshi';color:var(--paragraph);font-size:0.875rem;">{{label}}</span>{{/if}}
</div>


        
            
            {
  "px": 48,
  "label": "Loading your scripts…"
}

Handle: @spinner--large
Variants (3): Default , Small (inline/button) , Large (page)
Preview:
- With layout
- Component only
Filesystem Path: src/components/02-atoms/spinner/spinner.hbs

Bootstrap spinner-border. Always use --primary-color (purple). Include a visually-hidden “Loading…” text for screen readers. Use inline with a label for button loading states.

Appears in: Script Generator (while generating), Thumbnail Editor (while saving/removing background), bulk delete modal (while deleting), any async action where the user must wait for a result.