Spinner / Loader generator
Loading feedback keeps users from re-clicking a button while a record saves. Choose a ring, dots, pulse or wave style that matches the rest of your motion language.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<div class="studio-spinner-wrap">
<lightning-spinner alternative-text="Loading" size="medium" class="studio-spinner"></lightning-spinner>
</div>
</template>Design tips for spinner / loaders
- Use the ring style for full-page loads and dots or wave for inline, in-component loading.
- Slower speeds (1200ms+) feel calmer for long operations; faster speeds suit quick inline fetches.
- Always pair a spinner with alternative text for screen readers — the generated markup includes it.