diff options
Diffstat (limited to 'src/components/atoms/loaders/spinner.module.scss')
| -rw-r--r-- | src/components/atoms/loaders/spinner.module.scss | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/src/components/atoms/loaders/spinner.module.scss b/src/components/atoms/loaders/spinner.module.scss new file mode 100644 index 0000000..8d818a2 --- /dev/null +++ b/src/components/atoms/loaders/spinner.module.scss @@ -0,0 +1,48 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; + gap: var(--spacing-2xs); + margin: var(--spacing-md) 0; +} + +.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); + color: var(--color-primary-darker); + text-align: center; +} + +@keyframes spinner { + 0%, + 80%, + 100% { + transform: scale(0); + } + + 40% { + transform: scale(1); + } +} |
