Files
supabase/apps/www/components/LaunchWeek/Ticket/loading-dots.module.css
T
2022-11-23 16:09:18 +08:00

49 lines
818 B
CSS

.loading {
display: inline-flex;
align-items: center;
--loading-dots-height: auto;
--loading-dots-size: 2px;
height: var(--loading-dots-height);
}
.loading .spacer {
margin-right: var(--space-3x);
}
.loading span {
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
width: var(--loading-dots-size);
height: var(--loading-dots-size);
border-radius: 50%;
background-color: var(--accents-6);
display: inline-block;
margin: 0 1px;
}
.loading.reverse span {
background-color: var(--accents-2);
}
.loading span:nth-of-type(2) {
animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
animation-delay: 0.4s;
}
@keyframes blink {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}