Loader by jeremyssocial
#212121
1.milk-loader { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 height: 100%; 6} 7 8.glass { 9 position: relative; 10 width: 100px; 11 height: 150px; 12 background-color: transparent; 13 border: 3px solid #666; 14 border-radius: 10px 10px 35px 35px; 15 overflow: hidden; 16} 17 18.milk { 19 position: absolute; 20 bottom: 0; 21 width: 100%; 22 height: 0; 23 background-color: #fff; 24 border-radius: 5px 5px 30px 30px; 25 animation: fillMilk 2s ease-in-out infinite; 26} 27 28/* Keyframes to animate the milk in a non-uniform way, simulating a filling glass */ 29@keyframes fillMilk { 30 0%, 31 100% { 32 height: 10%; 33 border-radius: 5px 5px 30px 30px; 34 } 35 50% { 36 height: 80%; 37 border-radius: 25px; 38 } 39} 40
322 views
322 views
MIT License