Matchu
059644f847
Add some unobtrusive white background for contrast, show it when the Turbo frame is loading too, add a spinner cursor, and fix a silliness of how we put the `position: absolute` stuff into the component-y part of the hanger spinner instead of this specific use case lol oops!
64 lines
1.1 KiB
CSS
64 lines
1.1 KiB
CSS
.hanger-spinner {
|
|
height: 32px;
|
|
width: 32px;
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
animation: 1.2s infinite hanger-spinner-swing;
|
|
transform-origin: top center;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
animation: 1.6s infinite hanger-spinner-fade-pulse;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Adapted from animate.css "swing". We spend 75% of the time swinging,
|
|
then 25% of the time pausing before the next loop.
|
|
|
|
We use this animation for folks who are okay with dizzy-ish motion.
|
|
For reduced motion, we use a pulse-fade instead.
|
|
*/
|
|
@keyframes hanger-spinner-swing {
|
|
15% {
|
|
transform: rotate3d(0, 0, 1, 15deg);
|
|
}
|
|
|
|
30% {
|
|
transform: rotate3d(0, 0, 1, -10deg);
|
|
}
|
|
|
|
45% {
|
|
transform: rotate3d(0, 0, 1, 5deg);
|
|
}
|
|
|
|
60% {
|
|
transform: rotate3d(0, 0, 1, -5deg);
|
|
}
|
|
|
|
75% {
|
|
transform: rotate3d(0, 0, 1, 0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate3d(0, 0, 1, 0deg);
|
|
}
|
|
}
|
|
|
|
/*
|
|
A homebrew fade-pulse animation. We use this for folks who don't
|
|
like motion. It's an important accessibility thing!
|
|
*/
|
|
@keyframes hanger-spinner-fade-pulse {
|
|
0% {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.2;
|
|
}
|
|
}
|