Edit Loading Animation

Name

Also known as (comma separated)

Brief definition Motion indicating an operation in progress.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "style", "type": "select", "label": "Style", "default": "spinner", "options": [ "spinner", "dots", "bar" ] }, { "id": "duration", "type": "number", "label": "Cycle (ms)", "default": 1000, "min": 300, "max": 2500, "step": 100 }, { "id": "message", "type": "text", "label": "Status message", "default": "Loading results" }, { "id": "accent", "type": "color", "label": "Colour", "default": "#BFD9F2", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"mot-load-stage\" data-style=\"{{style}}\">\n <div class=\"mot-load-spinner\" style=\"border-top-color:{{accent}};\"></div>\n <div class=\"mot-load-dots\"><span style=\"background:{{accent}};\"></span><span style=\"background:{{accent}};\"></span><span style=\"background:{{accent}};\"></span></div>\n <div class=\"mot-load-bar\"><span style=\"background:{{accent}};\"></span></div>\n <p role=\"status\" aria-live=\"polite\" class=\"mot-load-caption\">{{message}}&hellip;</p>\n</div>\n<style>\n.mot-load-stage { width: 100%; max-width: 320px; padding: 20px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; text-align: center; }\n.mot-load-spinner, .mot-load-dots, .mot-load-bar { display: none; }\n[data-style=\"spinner\"] .mot-load-spinner { display: inline-block; width: 34px; height: 34px; border: 4px solid #24143022; border-radius: 999px; }\n[data-style=\"dots\"] .mot-load-dots { display: flex; gap: 8px; justify-content: center; }\n[data-style=\"dots\"] .mot-load-dots span { width: 10px; height: 10px; border-radius: 999px; display: block; }\n[data-style=\"bar\"] .mot-load-bar { height: 8px; background: #24143014; border-radius: 999px; overflow: hidden; }\n[data-style=\"bar\"] .mot-load-bar span { display: block; height: 100%; width: 40%; border-radius: 999px; }\n.mot-load-caption { margin: 12px 0 0; }\n@media (prefers-reduced-motion: no-preference) {\n [data-style=\"spinner\"] .mot-load-spinner { animation: mot-load-spin {{duration}}ms linear infinite; }\n [data-style=\"dots\"] .mot-load-dots span:nth-child(1) { animation: mot-load-bounce {{duration}}ms ease-in-out infinite; }\n [data-style=\"dots\"] .mot-load-dots span:nth-child(2) { animation: mot-load-bounce {{duration}}ms ease-in-out .15s infinite; }\n [data-style=\"dots\"] .mot-load-dots span:nth-child(3) { animation: mot-load-bounce {{duration}}ms ease-in-out .3s infinite; }\n [data-style=\"bar\"] .mot-load-bar span { animation: mot-load-slide {{duration}}ms ease-in-out infinite; }\n @keyframes mot-load-spin { to { transform: rotate(360deg); } }\n @keyframes mot-load-bounce { 0%,100% { opacity: .3; } 50% { opacity: 1; } }\n @keyframes mot-load-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }\n}\n</style>", "tailwind": "<div class=\"w-full max-w-[320px] p-5 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70 text-center\" data-style=\"{{style}}\">\n <div class=\"tw-load-spinner hidden w-[34px] h-[34px] rounded-full border-4 border-[#24143022] mx-auto\" style=\"border-top-color:{{accent}};\"></div>\n <div class=\"tw-load-dots hidden gap-2 justify-center\"><span class=\"w-2.5 h-2.5 rounded-full block\" style=\"background:{{accent}};\"></span><span class=\"w-2.5 h-2.5 rounded-full block\" style=\"background:{{accent}};\"></span><span class=\"w-2.5 h-2.5 rounded-full block\" style=\"background:{{accent}};\"></span></div>\n <div class=\"tw-load-bar hidden h-2 bg-[#24143014] rounded-full overflow-hidden\"><span class=\"block h-full w-2/5 rounded-full\" style=\"background:{{accent}};\"></span></div>\n <p role=\"status\" aria-live=\"polite\" class=\"mt-3\">{{message}}&hellip;</p>\n</div>\n<style>\n[data-style=\"spinner\"] .tw-load-spinner { display: inline-block; }\n[data-style=\"dots\"] .tw-load-dots { display: flex; }\n[data-style=\"bar\"] .tw-load-bar { display: block; }\n@media (prefers-reduced-motion: no-preference) {\n [data-style=\"spinner\"] .tw-load-spinner { animation: mot-load-tw-spin {{duration}}ms linear infinite; }\n [data-style=\"dots\"] .tw-load-dots span:nth-child(1) { animation: mot-load-tw-bounce {{duration}}ms ease-in-out infinite; }\n [data-style=\"dots\"] .tw-load-dots span:nth-child(2) { animation: mot-load-tw-bounce {{duration}}ms ease-in-out .15s infinite; }\n [data-style=\"dots\"] .tw-load-dots span:nth-child(3) { animation: mot-load-tw-bounce {{duration}}ms ease-in-out .3s infinite; }\n [data-style=\"bar\"] .tw-load-bar span { animation: mot-load-tw-slide {{duration}}ms ease-in-out infinite; }\n @keyframes mot-load-tw-spin { to { transform: rotate(360deg); } }\n @keyframes mot-load-tw-bounce { 0%,100% { opacity: .3; } 50% { opacity: 1; } }\n @keyframes mot-load-tw-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }\n}\n</style>", "react": "export function LoadingAnimation({\n style = \"{{style}}\",\n duration = {{duration}},\n message = \"{{message}}\",\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ width: \"100%\", maxWidth: 320, padding: 20, background: \"#FAF7F2\", border: \"1px solid #24143022\", borderRadius: 12, fontFamily: \"system-ui, sans-serif\", fontSize: 13, color: \"#241430aa\", textAlign: \"center\" }}>\n {style === \"spinner\" && (\n <div className=\"spinner\" style={{ display: \"inline-block\", width: 34, height: 34, border: \"4px solid #24143022\", borderTopColor: accent, borderRadius: 999 }} />\n )}\n {style === \"dots\" && (\n <div style={{ display: \"flex\", gap: 8, justifyContent: \"center\" }}>\n {[0, 1, 2].map((i) => (\n <span key={i} className={`dot dot-${i}`} style={{ width: 10, height: 10, borderRadius: 999, background: accent, display: \"block\" }} />\n ))}\n </div>\n )}\n {style === \"bar\" && (\n <div style={{ height: 8, background: \"#24143014\", borderRadius: 999, overflow: \"hidden\" }}>\n <span className=\"bar\" style={{ display: \"block\", height: \"100%\", width: \"40%\", borderRadius: 999, background: accent }} />\n </div>\n )}\n <p role=\"status\" aria-live=\"polite\" style={{ margin: \"12px 0 0\" }}>{message}&hellip;</p>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .spinner { animation: mot-load-spin ${duration}ms linear infinite; }\n .dot-0 { animation: mot-load-bounce ${duration}ms ease-in-out infinite; }\n .dot-1 { animation: mot-load-bounce ${duration}ms ease-in-out .15s infinite; }\n .dot-2 { animation: mot-load-bounce ${duration}ms ease-in-out .3s infinite; }\n .bar { animation: mot-load-slide ${duration}ms ease-in-out infinite; }\n @keyframes mot-load-spin { to { transform: rotate(360deg); } }\n @keyframes mot-load-bounce { 0%,100% { opacity: .3; } 50% { opacity: 1; } }\n @keyframes mot-load-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }\n }\n `}</style>\n </div>\n );\n}" }