359 views
1.loader { 2 position: relative; 3} 4 5.circle { 6 position: absolute; 7 top: 50%; 8 left: 50%; 9 transform: translate(-50%, -50%); 10 width: 0px; 11 height: 0px; 12 border-radius: 100%; 13 opacity: 0; 14 animation: pulse_4923 4s infinite linear; 15 border: 0.5px solid #f3f3f3; 16 box-shadow: 0px 0px 5px #eef0e5; 17} 18 19.circle:nth-child(1) { 20 animation-delay: .2s; 21} 22 23.circle:nth-child(2) { 24 animation-delay: .4s; 25} 26 27.circle:nth-child(3) { 28 animation-delay: .8s; 29} 30 31.circle:nth-child(4) { 32 animation-delay: 1s; 33} 34 35@keyframes pulse_4923 { 36 0% { 37 opacity: 0.0; 38 width: 0px; 39 height: 0px; 40 transform: translate(-50%, -50%) scale(1); 41 } 42 43 10% { 44 opacity: 0.5; 45 transform: translate(-50%, -50%) scale(2); 46 } 47 48 100% { 49 opacity: 0.0; 50 width: 100px; 51 height: 100px; 52 transform: translate(-50%, -50%) scale(1); 53 } 54} 55
boryanakrasteva
Boryana
MIT License