Loader by vikramsinghnegi
#e8e8e8
1.loader { 2 height: 150px; 3 width: 100px; 4 border-radius: 55px 55px 10px 10px; 5 position: relative; 6 background: #f0744f; 7 8 background-image: linear-gradient( 9 0deg, 10 #f63a99 25%, 11 #30dcf6 20%, 12 #30dcf6 20%, 13 #668c92 50%, 14 #85782a 40%, 15 #f2d200 50%, 16 #f2d200 75%, 17 #70ca5c 75% 18 ); 19 background-position: 0px 0px; 20 background-size: auto 175px; 21 background-repeat: repeat-y; 22 animation: colorShift 2s linear infinite; 23} 24.loader:before { 25 content: ""; 26 position: absolute; 27 left: 10px; 28 bottom: 15px; 29 width: 15px; 30 height: 100px; 31 border-radius: 50px; 32 background: rgba(255, 255, 255, 0.5); 33} 34 35.loader:after { 36 content: ""; 37 position: absolute; 38 left: 50%; 39 top: 100%; 40 transform: translate(-50%, 0); 41 box-shadow: 0 15px 2px rgba(0, 0, 0, 0.25) inset; 42 width: 32px; 43 height: 45px; 44 background: #534b44; 45 border-radius: 0 0 12px 12px; 46} 47 48@keyframes colorShift { 49 to { 50 background-position: 0 175px; 51 } 52} 53
65 views
65 views
MIT License