diff options
Diffstat (limited to 'client/components/main/spinner.styl')
-rw-r--r-- | client/components/main/spinner.styl | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/client/components/main/spinner.styl b/client/components/main/spinner.styl new file mode 100644 index 00000000..f4b8cc86 --- /dev/null +++ b/client/components/main/spinner.styl @@ -0,0 +1,45 @@ +/* + * From https://github.com/tobiasahlin/SpinKit + * + * Usage: + * + * <div class="sk-spinner sk-spinner-wave"> + * <div class="sk-rect1"></div> + * <div class="sk-rect2"></div> + * <div class="sk-rect3"></div> + * <div class="sk-rect4"></div> + * <div class="sk-rect5"></div> + * </div> + * + */ + +.sk-spinner-wave { + + &.sk-spinner { + width: 50px; + height: 50px; + margin: auto; + margin-top: 30vh; + text-align: center; + font-size: 10px; + } + + div { + background-color: #333; + height: 100%; + width: 6px; + display: inline-block; + + animation: sk-waveStretchDelay 1.2s infinite ease-in-out; + } + + .sk-rect2 { animation-delay: -1.1s } + .sk-rect3 { animation-delay: -1.0s } + .sk-rect4 { animation-delay: -0.9s } + .sk-rect5 { animation-delay: -0.8s } +} + +@keyframes sk-waveStretchDelay { + 0%, 40%, 100% { transform: scaleY(0.4) } + 20% { transform: scaleY(1.0) } +} |