#e8e8e8
1.loader-3 { 2 width: 10em; 3 display: flex; 4 justify-content: space-evenly; 5} 6 7.circle { 8 width: 1em; 9 height: 1em; 10 border-radius: 50%; 11 position: relative; 12} 13 14.circle:nth-child(1) { 15 background-color: #90be6d; 16} 17 18.circle:nth-child(2) { 19 background-color: #f9c74f; 20} 21 22.circle:nth-child(3) { 23 background-color: #f8961e; 24} 25 26.circle:nth-child(4) { 27 background-color: #f3722c; 28} 29 30.circle:nth-child(5) { 31 background-color: #f94346; 32} 33 34.circle::before { 35 content: ""; 36 width: 100%; 37 height: 100%; 38 position: absolute; 39 border-radius: 50%; 40 opacity: 0.5; 41 animation: animateLoader38 2s ease-out infinite; 42} 43 44.circle:nth-child(1)::before { 45 background-color: #90be6d; 46} 47 48.circle:nth-child(2)::before { 49 background-color: #f9c74f; 50 animation-delay: 0.2s; 51} 52 53.circle:nth-child(3)::before { 54 background-color: #f8961e; 55 animation-delay: 0.4s; 56} 57 58.circle:nth-child(4)::before { 59 background-color: #f3722c; 60 animation-delay: 0.6s; 61} 62 63.circle:nth-child(5)::before { 64 background-color: #f94346; 65 animation-delay: 0.8s; 66} 67 68@keyframes animateLoader38 { 69 0% { 70 transform: scale(1); 71 } 72 73 50%, 74 75% { 75 transform: scale(2.5); 76 } 77 78 80%, 79 100% { 80 opacity: 0; 81 } 82}
1.5K views
1.5K views
Comments
MIT License