Loader by Avishek255874
#212121
1.loader { 2} 3 4.loader { 5 width: 48px; 6 height: 48px; 7 position: relative; 8} 9 10.loader::before , .loader::after { 11 content: ''; 12 position: absolute; 13 left: 50%; 14 top: 50%; 15 transform: translate(-50% , -50%); 16 width: 48em; 17 height: 48em; 18 background-image: radial-gradient(circle 10px, #FFF 100%, transparent 0), 19 radial-gradient(circle 10px, #FFF 100%, transparent 0), 20 radial-gradient(circle 10px, #FFF 100%, transparent 0), 21 radial-gradient(circle 10px, #FFF 100%, transparent 0), 22 radial-gradient(circle 10px, #FFF 100%, transparent 0), 23 radial-gradient(circle 10px, #FFF 100%, transparent 0), 24 radial-gradient(circle 10px, #FFF 100%, transparent 0), 25 radial-gradient(circle 10px, #FFF 100%, transparent 0); 26 background-position: 0em -18em, 0em 18em, 18em 0em, -18em 0em, 27 13em -13em, -13em -13em, 13em 13em, -13em 13em; 28 background-repeat: no-repeat; 29 font-size: 0.5px; 30 border-radius: 50%; 31 animation: blast 1s ease-in infinite; 32} 33 34.loader::after { 35 font-size: 1px; 36 background: #fff; 37 animation: bounce 1s ease-in infinite; 38} 39 40@keyframes bounce { 41 0% , 100% { 42 font-size: 0.75px 43 } 44 45 50% { 46 font-size: 1.5px 47 } 48} 49 50@keyframes blast { 51 0% , 40% { 52 font-size: 0.5px; 53 } 54 55 70% { 56 opacity: 1; 57 font-size: 4px; 58 } 59 60 100% { 61 font-size: 6px; 62 opacity: 0; 63 } 64}
383 views
383 views
MIT License