diff options
Diffstat (limited to 'sticker.pinapelz.moe/style/spinner.sass')
| -rw-r--r-- | sticker.pinapelz.moe/style/spinner.sass | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/sticker.pinapelz.moe/style/spinner.sass b/sticker.pinapelz.moe/style/spinner.sass new file mode 100644 index 0000000..cbc9042 --- /dev/null +++ b/sticker.pinapelz.moe/style/spinner.sass @@ -0,0 +1,68 @@ +// 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 + + &.green > .sk-chase-dot:before + background-color: #00C853 + + > .sk-chase-dot + width: 100% + height: 100% + position: absolute + left: 0 + top: 0 + animation: sk-chase-dot 2.0s infinite ease-in-out both + + &: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 + + &:nth-child(1) + animation-delay: -1.1s + &:nth-child(2) + animation-delay: -1.0s + &:nth-child(3) + animation-delay: -0.9s + &:nth-child(4) + animation-delay: -0.8s + &:nth-child(5) + animation-delay: -0.7s + &:nth-child(6) + animation-delay: -0.6s + &:nth-child(1):before + animation-delay: -1.1s + &:nth-child(2):before + animation-delay: -1.0s + &:nth-child(3):before + animation-delay: -0.9s + &:nth-child(4):before + animation-delay: -0.8s + &:nth-child(5):before + animation-delay: -0.7s + &: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) |
