#212121
1.loader { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6 width: 100px; 7 height: 100px; 8 border-radius: 50%; 9 overflow: hidden; 10 animation: mac0123 1s linear infinite; 11} 12 13.loader span { 14 position: absolute; 15 width: 100%; 16 height: 100%; 17 background: #f00; 18 left: 50%; 19 border-radius: 50%; 20 transform-origin: left; 21} 22 23.loader span:nth-child(1) { 24 background: #0fa503; 25 transform: rotate(0deg); 26 z-index: 2; 27} 28 29.loader span:nth-child(2) { 30 background: #ffd203; 31 transform: rotate(60deg); 32 z-index: 3; 33} 34 35.loader span:nth-child(3) { 36 background: #54cd28; 37 transform: rotate(120deg); 38 z-index: 4; 39} 40 41.loader span:nth-child(4) { 42 background: #129cf5; 43 transform: rotate(180deg); 44 z-index: 5; 45} 46 47.loader span:nth-child(5) { 48 background: #bb5ed3; 49 transform: rotate(240deg); 50 z-index: 6; 51} 52 53.loader span:nth-child(6) { 54 background: #ff4f45; 55 transform: rotate(300deg); 56 z-index: 7; 57 overflow: hidden; 58} 59 60.loader span:nth-child(6):before { 61 content: ''; 62 position: absolute; 63 top: 45px; 64 left: -72px; 65 width: 100%; 66 height: 100%; 67 background: #ffd203; 68 border-radius: 50%; 69 z-index: 2; 70} 71 72.loader span:nth-child(6):after { 73 content: ''; 74 position: absolute; 75 top: 42px; 76 left: -23px; 77 width: 100%; 78 height: 100%; 79 background: #fea503; 80 border-radius: 50%; 81} 82 83@keyframes mac0123 { 84 0% { 85 transform: translate(-50%, -50%) rotate(359deg); 86 } 87 88 100% { 89 transform: translate(-50%, -50%) rotate(0deg); 90 } 91}
1K views
1K views
Comments
MIT License