diff options
Diffstat (limited to 'src/components/Spinner/Spinner.module.scss')
| -rw-r--r-- | src/components/Spinner/Spinner.module.scss | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/src/components/Spinner/Spinner.module.scss b/src/components/Spinner/Spinner.module.scss new file mode 100644 index 0000000..044b333 --- /dev/null +++ b/src/components/Spinner/Spinner.module.scss @@ -0,0 +1,47 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; + gap: var(--spacing-2xs); + margin-bottom: var(--spacing-md); +} + +.ball { + width: fun.convert-px(8); + height: fun.convert-px(8); + background: linear-gradient( + to right, + var(--color-primary-light) 0%, + var(--color-primary-lighter) 100% + ); + border-radius: 50%; + animation: spinner 1.4s infinite ease-in-out both; + + &:first-child { + animation-delay: -0.32s; + } + + &:nth-child(2) { + animation-delay: -0.16s; + } +} + +.text { + margin-left: var(--spacing-xs); + text-align: center; +} + +@keyframes spinner { + 0%, + 80%, + 100% { + transform: scale(0); + } + + 40% { + transform: scale(1); + } +} |
