Loader by MiniJohan
#212121
1.loader { 2 display: flex; 3 max-width: 350; 4 position: relative; 5 gap: 20px; 6 justify-content: space-evenly; 7 animation: rotate 3s linear infinite; 8 color: white; 9} 10 11.loading { 12} 13 14.orb { 15 width: 25px; 16 height: 25px; 17 background-color: rgb(255, 255, 255); 18 border-radius: 50%; 19 position: absolute; 20} 21 22.orb:nth-child(1) { 23 top: 20px; 24 left: 20px; 25 animation: bounce2 1.5s ease 1s infinite; 26} 27 28.orb:nth-child(2) { 29 top: 20px; 30 right: 20px; 31 animation: bounce2 1.5s ease 1s infinite; 32} 33 34.orb:nth-child(3) { 35 bottom: 20px; 36 left: 20px; 37 animation: bounce2 1.5s ease 1s infinite; 38} 39 40.orb:nth-child(4) { 41 bottom: 20px; 42 right: 20px; 43 animation: bounce2 1.5s ease 1s infinite; 44} 45 46.orb:nth-child(5) { 47 top: 20px; 48 animation: bounce2 1.5s ease 1s infinite; 49} 50 51.orb:nth-child(6) { 52 bottom: 20px; 53 animation: bounce2 1.5s ease 1s infinite; 54} 55 56.orb:nth-child(7) { 57 left: 20px; 58 top: -12.5px; 59 animation: bounce2 1.5s ease 1s infinite; 60} 61 62.orb:nth-child(8) { 63 right: 20px; 64 top: -12.5px; 65 animation: bounce2 1.5s ease 1s infinite; 66} 67 68.orb:nth-child(9) { 69 top: -12.5px; 70 animation: bounce 1.5s ease 1.5s infinite; 71} 72 73@keyframes rotate { 74 0% { 75 transform: rotate(0); 76 } 77 78 25% { 79 transform: rotate(90deg); 80 } 81 82 50% { 83 transform: rotate(180deg); 84 } 85 86 100% { 87 transform: rotate(360deg); 88 } 89} 90 91@keyframes bounce { 92 0% { 93 transform: scale(1); 94 } 95 96 50% { 97 transform: scale(0.5); 98 } 99} 100 101@keyframes bounce2 { 102 0% { 103 transform: scale(1); 104 } 105 106 50% { 107 transform: scale(0.5); 108 } 109} 110
76 views
76 views
MIT License