Loader by Cobp
#212121
1.loader { 2 position: relative; 3 display: flex; 4 align-items: center; 5 justify-content: center; 6 width: 100px; 7 height: 100px; 8 margin: 130px 0; 9 perspective: 780px; 10} 11 12.text { 13 font-size: 20px; 14 font-weight: 700; 15 color: #cecece; 16 z-index: 10; 17} 18 19.load-inner { 20 position: absolute; 21 width: 100%; 22 height: 100%; 23 box-sizing: border-box; 24 border-radius: 50%; 25} 26 27.load-inner.load-one { 28 left: 0%; 29 top: 0%; 30 border-bottom: 3px solid #5c5edc; 31 animation: rotate1 1.15s linear infinite; 32} 33 34.load-inner.load-two { 35 right: 0%; 36 top: 0%; 37 border-right: 3px solid #9147ff; 38 animation: rotate2 1.15s 0.1s linear infinite; 39} 40 41.load-inner.load-three { 42 right: 0%; 43 bottom: 0%; 44 border-top: 3px solid #3b82f6; 45 animation: rotate3 1.15s 0.15s linear infinite; 46} 47 48@keyframes rotate1 { 49 0% { 50 transform: rotateX(45deg) rotateY(-45deg) rotateZ(0deg); 51 } 52 100% { 53 transform: rotateX(45deg) rotateY(-45deg) rotateZ(360deg); 54 } 55} 56@keyframes rotate2 { 57 0% { 58 transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg); 59 } 60 100% { 61 transform: rotateX(45deg) rotateY(45deg) rotateZ(360deg); 62 } 63} 64@keyframes rotate3 { 65 0% { 66 transform: rotateX(-60deg) rotateY(0deg) rotateZ(0deg); 67 } 68 100% { 69 transform: rotateX(-60deg) rotateY(0deg) rotateZ(360deg); 70 } 71} 72
432 views
Variation of aloader
MIT License