925 views
1.dots-container { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 height: 100%; 6 width: 100%; 7} 8 9.dot { 10 height: 20px; 11 width: 20px; 12 margin-right: 10px; 13 border-radius: 10px; 14 background-color: #b3d4fc; 15 animation: pulse 1.5s infinite ease-in-out; 16} 17 18.dot:last-child { 19 margin-right: 0; 20} 21 22.dot:nth-child(1) { 23 animation-delay: -0.3s; 24} 25 26.dot:nth-child(2) { 27 animation-delay: -0.1s; 28} 29 30.dot:nth-child(3) { 31 animation-delay: 0.1s; 32} 33 34@keyframes pulse { 35 0% { 36 transform: scale(0.8); 37 background-color: #b3d4fc; 38 box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7); 39 } 40 41 50% { 42 transform: scale(1.2); 43 background-color: #6793fb; 44 box-shadow: 0 0 0 10px rgba(178, 212, 252, 0); 45 } 46 47 100% { 48 transform: scale(0.8); 49 background-color: #b3d4fc; 50 box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7); 51 } 52}
MIT License