Loader by funkyjuice213
#212121
1.loader { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 height: 100%; 6} 7 8.loader-bar { 9 height: 25px; 10 width: 6px; 11 margin: 0 3px; 12 border-radius: 20px; 13 animation: loader 2s ease-in-out infinite; 14} 15 16.bar-1 { 17 background: linear-gradient(to right, #00e6e6, #00ccff, #0099ff, #0066ff); 18 animation-delay: 0s; 19 box-shadow: 0px 0px 15px 3px #00e6e6; 20} 21 22.bar-2 { 23 background: linear-gradient(to right, #00ccff, #0099ff, #0066ff, #00e6e6); 24 animation-delay: 0.1s; 25 box-shadow: 0px 0px 15px 3px #00ccff; 26} 27 28.bar-3 { 29 background: linear-gradient(to right, #0099ff, #0066ff, #00e6e6, #00ccff); 30 animation-delay: 0.2s; 31 box-shadow: 0px 0px 15px 3px #0099ff; 32} 33 34.bar-4 { 35 background: linear-gradient(to right, #0066ff, #00e6e6, #00ccff, #0099ff); 36 animation-delay: 0.3s; 37 box-shadow: 0px 0px 15px 3px #0066ff; 38} 39 40@keyframes loader { 41 0% { 42 transform: scaleY(1); 43 } 44 45 50% { 46 transform: scaleY(2); 47 } 48 49 100% { 50 transform: scaleY(1); 51 } 52} 53
715 views
715 views
MIT License