Trying out different styles for a loader component
Created
April 6, 2018 18:39
-
-
Save buchanora/a011508209aa2691b7ace3fea3abeb40 to your computer and use it in GitHub Desktop.
Loader Animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .layout | |
| .loader | |
| .quad-1.quad | |
| .quad-2.quad | |
| .quad-3.quad | |
| .quad-4.quad |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, | |
| html { | |
| height: 100% | |
| } | |
| body { | |
| padding: 30px; | |
| } | |
| .layout { | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| } | |
| // Actual loader styles | |
| .loader { | |
| position: relative; | |
| margin: 0 auto; | |
| border-radius: 50%; | |
| width: 60px; | |
| height: 60px; | |
| animation-fill-mode: forwards; | |
| animation: rotate 3000ms linear infinite; | |
| } | |
| .quad { | |
| position: absolute; | |
| top: -8px; | |
| left: -8px; | |
| display: block; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| border: 8px solid transparent; | |
| border-left-color: rgb(3, 200, 226); | |
| animation-fill-mode: forwards; | |
| } | |
| .quad-1{ | |
| animation: rotate1 1200ms linear infinite; | |
| } | |
| .quad-2{ | |
| animation: rotate2 1200ms linear infinite; | |
| } | |
| .quad-3{ | |
| animation: rotate3 1200ms linear infinite; | |
| } | |
| .quad-4{ | |
| animation: rotate4 1200ms linear infinite; | |
| } | |
| @keyframes rotate{ | |
| 0%{ | |
| transform: rotateZ(0deg) | |
| } | |
| 100%{ | |
| transform: rotateZ(360deg) | |
| } | |
| } | |
| @keyframes rotate1{ | |
| 0%{ | |
| transform: rotateZ(0deg) | |
| } | |
| 12.5%{ | |
| transform: rotateZ(90deg) | |
| } | |
| 25%{ | |
| transform: rotateZ(180deg) | |
| } | |
| 37.5%{ | |
| transform: rotateZ(270deg) | |
| } | |
| 50%{ | |
| transform: rotateZ(310deg) | |
| } | |
| 62.5%{ | |
| transform: rotateZ(330deg) | |
| } | |
| 75%{ | |
| transform: rotateZ(340deg) | |
| } | |
| 87.5%{ | |
| transform: rotateZ(350deg) | |
| } | |
| 100%{ | |
| transform: rotateZ(360deg) | |
| } | |
| } | |
| @keyframes rotate2{ | |
| 0%{ | |
| transform: rotateZ(0deg) | |
| } | |
| 12.5%{ | |
| transform: rotateZ(10deg) | |
| } | |
| 25%{ | |
| transform: rotateZ(90deg) | |
| } | |
| 37.5%{ | |
| transform: rotateZ(180deg) | |
| } | |
| 50%{ | |
| transform: rotateZ(270deg) | |
| } | |
| 62.5%{ | |
| transform: rotateZ(330deg) | |
| } | |
| 75%{ | |
| transform: rotateZ(340deg) | |
| } | |
| 87.5%{ | |
| transform: rotateZ(350deg) | |
| } | |
| 100%{ | |
| transform: rotateZ(360deg) | |
| } | |
| } | |
| @keyframes rotate3{ | |
| 0%{ | |
| transform: rotateZ(0deg) | |
| } | |
| 12.5%{ | |
| transform: rotateZ(10deg) | |
| } | |
| 25%{ | |
| transform: rotateZ(20deg) | |
| } | |
| 37.5%{ | |
| transform: rotateZ(90deg) | |
| } | |
| 50%{ | |
| transform: rotateZ(180deg) | |
| } | |
| 62.5%{ | |
| transform: rotateZ(270deg) | |
| } | |
| 75%{ | |
| transform: rotateZ(340deg) | |
| } | |
| 87.5%{ | |
| transform: rotateZ(350deg) | |
| } | |
| 100%{ | |
| transform: rotateZ(360deg) | |
| } | |
| } | |
| @keyframes rotate4{ | |
| 0%{ | |
| transform: rotateZ(0deg) | |
| } | |
| 12.5%{ | |
| transform: rotateZ(10deg) | |
| } | |
| 25%{ | |
| transform: rotateZ(20deg) | |
| } | |
| 32.5%{ | |
| transform: rotateZ(30deg) | |
| } | |
| 50%{ | |
| transform: rotateZ(90deg) | |
| } | |
| 62.5%{ | |
| transform: rotateZ(180deg) | |
| } | |
| 75%{ | |
| transform: rotateZ(270deg) | |
| } | |
| 87.5%{ | |
| transform: rotateZ(350deg) | |
| } | |
| 100%{ | |
| transform: rotateZ(360deg) | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment