Transitions & Animation
Animation
Utilities for animating elements with CSS animations.
Quick reference
| Class | Description |
|---|---|
animate-inprogress | .animate-inprogress {
background-image: linear-gradient(135deg, rgba(0, 0, 0, .05) 25%, transparent 0, transparent 50%, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 75%, transparent 0, transparent) !important
background-size: 30px 30px
animation: animate-inprogress 3s linear infinite
}
@keyframes animate-inprogress {
0% {
background-position: 0 0
}
to {
background-position: 60px 0
}
} |
animate-spinner | .animate-spinner {
--spinner-size: 24px
height: var(--spinner-size)
width: var(--spinner-size)
border-radius: 50%
border: calc(var(--spinner-size) / 8) solid rgba(var(--w-s-rgb-border-primary-subtle), .5)
border-top-color: var(--w-s-color-border-primary)
position: relative
animation: animate-spinner 0.75s infinite linear
}
.animate-spinner: : before, .animate-spinner: : after {
content: ' '
height: calc(var(--spinner-size) / 8)
width: calc(var(--spinner-size) / 8)
border-radius: 50%
position: absolute
top: calc(var(--spinner-size) / 180)
}
.animate-spinner: : after {
right: 0
}
.animate-spinner: : before {
left: 0
}
@keyframes animate-spinner {
to {
transform: rotate(359deg)
}
} |
Basic usage
In Progress
Add the animate-inprogress utility to add an animated background to indicate that something is in progress.
html
<div class="animate-inprogress">Saving...</div>Spinner
Add the animate-spinner utility to add an animated spinner to indicate that something is loading. You can change the size by adjusting --spinner-size (default size is 24px).
html
<div class="animate-spinner [--spinner-size:16px]"></div>
<div class="animate-spinner"></div>
<div class="animate-spinner [--spinner-size:32px]"></div>