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