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

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

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