diff options
author | Tayane Fernandes <tayane.rmf@gmail.com> | 2017-01-30 19:06:24 -0200 |
---|---|---|
committer | Tayane Fernandes <tayane.rmf@gmail.com> | 2017-02-01 11:32:34 -0200 |
commit | 8592cc5634490c030c829e72d860fabd2540933c (patch) | |
tree | 34edf455ecb936a9a5e013eade8d4ce8f3902330 /web-ui/app/scss/views | |
parent | ece5e033d89ad15e06ebc29391a67c4f55a7ba2f (diff) |
Add spinner before loading an email or draft
related with #657
with @tuliocasagrande
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); + } +} |