diff options
Diffstat (limited to 'web/style/spinner.css')
| -rw-r--r-- | web/style/spinner.css | 65 |
1 files changed, 1 insertions, 64 deletions
diff --git a/web/style/spinner.css b/web/style/spinner.css index dcf6832..2685235 100644 --- a/web/style/spinner.css +++ b/web/style/spinner.css @@ -1,64 +1 @@ -/* Chase spinner from https://tobiasahlin.com/spinkit/. MIT license */ -.sk-center-wrapper { - width: 100%; - display: flex; - justify-content: space-around; -} - -.sk-chase { - position: relative; - animation: sk-chase 2.5s infinite linear both; -} - -.sk-chase-dot { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - animation: sk-chase-dot 2.0s infinite ease-in-out both; -} - -.sk-chase-dot:before { - content: ''; - display: block; - width: 25%; - height: 25%; - border-radius: 100%; - animation: sk-chase-dot-before 2.0s infinite ease-in-out both; - background-color: #FFF; -} - -.sk-chase.green > .sk-chase-dot:before { - background-color: #00C853; -} - -.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; } -.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; } -.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; } -.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; } -.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; } -.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; } -.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; } -.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; } -.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; } -.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; } -.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; } -.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; } - -@keyframes sk-chase { - 100% { transform: rotate(360deg); } -} - -@keyframes sk-chase-dot { - 80%, 100% { transform: rotate(360deg); } -} - -@keyframes sk-chase-dot-before { - 50% { - transform: scale(0.4); - } - 100%, 0% { - transform: scale(1.0); - } -} +.sk-center-wrapper{width:100%;display:flex;justify-content:space-around}.sk-chase{position:relative;animation:sk-chase 2.5s infinite linear both}.sk-chase.green>.sk-chase-dot:before{background-color:#00C853}.sk-chase>.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2.0s infinite ease-in-out both}.sk-chase>.sk-chase-dot:before{content:'';display:block;width:25%;height:25%;border-radius:100%;animation:sk-chase-dot-before 2.0s infinite ease-in-out both;background-color:#FFF}.sk-chase>.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2){animation-delay:-1.0s}.sk-chase>.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase>.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase>.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2):before{animation-delay:-1.0s}.sk-chase>.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase>.sk-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes sk-chase{100%{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1)}} |
