crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

LoadingDots Working (:

Browse Source
This commit is contained in:
Bel Curcio 2021-06-07 16:08:06 -03:00
parent 633fd0c98d
commit a314148ad1
2 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/ui/LoadingDots/LoadingDots.module.css
View File

@ -1,22 +1,23 @@
.root { .root {
@apply inline-flex text-center items-center leading-7; @apply inline-flex text-center items-center leading-7;
}
& span { .root .dot {
@apply bg-accent-6 rounded-full h-2 w-2; @apply rounded-full h-2 w-2;
animation-name: blink; background-color: currentColor;
animation-duration: 1.4s; animation-name: blink;
animation-iteration-count: infinite; animation-duration: 1.4s;
animation-fill-mode: both; animation-iteration-count: infinite;
margin: 0 2px; animation-fill-mode: both;
margin: 0 2px;
}
&:nth-of-type(2) { .root .dot:nth-of-type(2) {
animation-delay: 0.2s; animation-delay: 0.2s;
} }
&:nth-of-type(3) { .root .dot::nth-of-type(3) {
animation-delay: 0.4s; animation-delay: 0.4s;
}
}
} }
@keyframes blink { @keyframes blink {

6
components/ui/LoadingDots/LoadingDots.tsx
View File

@ -3,9 +3,9 @@ import s from './LoadingDots.module.css'
const LoadingDots: React.FC = () => { const LoadingDots: React.FC = () => {
return ( return (
<span className={s.root}> <span className={s.root}>
<span /> <span className={s.dot} key={`dot_1`} />
<span /> <span className={s.dot} key={`dot_2`} />
<span /> <span className={s.dot} key={`dot_3`} />
</span> </span>
) )
} }