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); +  } +} | 
