#e8e8e8
1.loader { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%,-50%); 6 overflow: hidden; 7 height: 80px; 8 width: 80px; 9 border: 1px solid transparent; 10 box-shadow: 0 0 0 2px rgb(25, 116, 253); 11 border-radius: 50%; 12} 13 14.waves { 15 position: relative; 16 width: 100%; 17 height: 100%; 18 border-radius: 50%; 19 background: rgb(30, 146, 255); 20 box-shadow: inset 0 0 50px rgb(0,0,0,.3); 21} 22 23.waves::before, 24.waves::after { 25 content: ''; 26 position: absolute; 27 width: 200%; 28 height: 200%; 29 top: 0; 30 left: 50%; 31 transform: translate(-50%, -75%); 32 background: #000; 33} 34 35.waves::before { 36 border-radius: 45%; 37 background: rgb(248, 248, 248); 38 animation: wave91234 5s linear infinite; 39} 40 41.waves::after { 42 border-radius: 40%; 43 background: rgb(255,255,255,.5); 44 animation: wave91234 10s linear infinite; 45} 46 47@keyframes wave91234 { 48 0% { 49 transform: translate(-50%, -75%) rotate(0deg); 50 } 51 52 100% { 53 transform: translate(-50%, -75%) rotate(360deg); 54 } 55}
2.8K views
2.8K views
Comments
MIT License