Loader by SouravBandyopadhyay
#212121
1.loader { 2 width: 8em; 3 height: 4em; 4 position: relative; 5 margin: 0 auto; 6} 7 8.circle { 9 width: 100%; 10 height: 100%; 11 position: absolute; 12 top: 0; 13 left: 0; 14 border-radius: 50%; 15 border: 0.4em solid transparent; 16 animation-duration: 2s; 17 animation-iteration-count: infinite; 18 animation-timing-function: linear; 19} 20 21.outer { 22 border-top-color: #ff0080; 23 border-right-color: #ffbf00; 24 border-bottom-color: #00bfff; 25 border-left-color: #80ff00; 26 animation-name: rotate-outer; 27} 28 29.inner { 30 border-top-color: #80ff00; 31 border-right-color: #00bfff; 32 border-bottom-color: #ffbf00; 33 border-left-color: #ff0080; 34 animation-name: rotate-inner; 35} 36 37@keyframes rotate-outer { 38 0% { 39 transform: rotate(0); 40 } 41 42 100% { 43 transform: rotate(360deg); 44 } 45} 46 47@keyframes rotate-inner { 48 0% { 49 transform: rotate(360deg); 50 } 51 52 100% { 53 transform: rotate(0); 54 } 55} 56
535 views
535 views
MIT License