diff options
Diffstat (limited to 'web-ui/app/scss/views')
-rw-r--r-- | web-ui/app/scss/views/_spinner.scss | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/web-ui/app/scss/views/_spinner.scss b/web-ui/app/scss/views/_spinner.scss new file mode 100644 index 00000000..1f8fb099 --- /dev/null +++ b/web-ui/app/scss/views/_spinner.scss @@ -0,0 +1,44 @@ +$offset: 187; +$duration: 1.4s; + +#spinner-section { + margin: auto; + width: 35px; + margin-top: 40%; +} + +#spinner { + animation: rotator $duration linear infinite; +} + +@keyframes rotator { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(270deg); } +} + +#spinner-path { + stroke-dasharray: $offset; + stroke-dashoffset: 0; + transform-origin: center; + animation: + dash $duration ease-in-out infinite, + colors ($duration*4) ease-in-out infinite; +} + +@keyframes colors { + 0% { stroke: $dark_blue; } + 50% { stroke: $middle_blue; } + 100% { stroke: $dark_blue; } +} + +@keyframes dash { + 0% { stroke-dashoffset: $offset; } + 50% { + stroke-dashoffset: $offset/4; + transform:rotate(135deg); + } + 100% { + stroke-dashoffset: $offset; + transform:rotate(450deg); + } +} |