Loader by Vazafirst
#e8e8e8
1#page { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5} 6 7#container { 8 display: flex; 9 justify-content: center; 10 align-items: center; 11 position: relative; 12} 13 14#h3 { 15 color: rgb(82, 79, 79); 16} 17 18#ring { 19 width: 190px; 20 height: 190px; 21 border: 1px solid transparent; 22 border-radius: 50%; 23 position: absolute; 24} 25 26#ring:nth-child(1) { 27 border-bottom: 8px solid rgb(240, 42, 230); 28 animation: rotate1 2s linear infinite; 29} 30 31@keyframes rotate1 { 32 from { 33 transform: rotateX(50deg) rotateZ(110deg); 34 } 35 36 to { 37 transform: rotateX(50deg) rotateZ(470deg); 38 } 39} 40 41#ring:nth-child(2) { 42 border-bottom: 8px solid rgb(240, 19, 67); 43 animation: rotate2 2s linear infinite; 44} 45 46@keyframes rotate2 { 47 from { 48 transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg); 49 } 50 51 to { 52 transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg); 53 } 54} 55 56#ring:nth-child(3) { 57 border-bottom: 8px solid rgb(3, 170, 170); 58 animation: rotate3 2s linear infinite; 59} 60 61@keyframes rotate3 { 62 from { 63 transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg); 64 } 65 66 to { 67 transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg); 68 } 69} 70 71#ring:nth-child(4) { 72 border-bottom: 8px solid rgb(207, 135, 1); 73 animation: rotate4 2s linear infinite; 74} 75 76@keyframes rotate4 { 77 from { 78 transform: rotateX(70deg) rotateZ(270deg); 79 } 80 81 to { 82 transform: rotateX(70deg) rotateZ(630deg); 83 } 84} 85/* Improving visualization in light mode */
1.5K views
Variation of aloader
MIT License