#212121
1.loader { 2 width: 100px; 3 height: 100px; 4 box-sizing: border-box; 5 border-radius: 50%; 6 border-top: 5px solid #e74c3c; 7 position: relative; 8 animation: load 2s linear infinite; 9} 10 11.loader::before,.loader::after { 12 content: ''; 13 width: 100px; 14 height: 100px; 15 position: absolute; 16 left: 0; 17 top: 0; 18 box-sizing: border-box; 19 border-radius: 50%; 20} 21 22.loader::before { 23 border-top: 5px solid #e67e22; 24 transform: rotate(120deg); 25} 26 27.loader::after { 28 border-top: 5px solid #3498db; 29 transform: rotate(240deg); 30} 31 32.loader span { 33 position: absolute; 34 font-size: small; 35 width: 100px; 36 height: 100px; 37 color: #fff; 38 text-align: center; 39 line-height: 100px; 40 animation: a2 2s linear infinite; 41} 42 43@keyframes load { 44 to { 45 transform: rotate(360deg); 46 } 47} 48 49@keyframes a2 { 50 to { 51 transform: rotate(-360deg); 52 } 53}
2.6K views
2.6K views
Comments
MIT License