Animation
Utilities for animating elements with CSS animations.
| Class | Properties |
|---|---|
| animate-loader-dash | animation: loader-dash 1.5s ease-in-out infinite;@keyframes {
"0%": {
"strokeDasharray": "1, 200",
"strokeDashoffset": "0"
},
"50%": {
"strokeDasharray": "89, 200",
"strokeDashoffset": "-35px"
},
"100%": {
"strokeDasharray": "89, 200",
"strokeDashoffset": "-124px"
}
} |
| animate-spin-slow | animation: spin 2s linear infinite; |
Loader dash
Add the animate-loader-dash utility to display the data loading indicator.
html
<div class="...">
<svg class="size-3/5 ... animate-spin-slow ..." viewBox="...">
<circle class="..." cx="50" cy="50" r="20"></circle>
<circle class="animate-loader-dash ..." cx="50" cy="50" r="20"></circle>
</svg>
</div>Spin slow
Add the animate-spin-slow utility to add a linear spin animation to elements like loading indicators.
html
<button type="button" class="bg-copilot-primary ..." disabled>
<svg class="animate-spin-slow size-5 ..." viewBox="0 0 24 24">
<!-- ... -->
</svg>
Processing...
</button>