2.2K views
CSS
1.loader { 2 position: relative; 3 width: 110px; 4 height: 30px; 5 background: #fff; 6 border-radius: 100px; 7} 8 9.loader::before { 10 content: ''; 11 position: absolute; 12 top: -20px; 13 left: 10px; 14 width: 30px; 15 height: 30px; 16 background: #fff; 17 border-radius: 50%; 18 box-shadow: 40px 0 0 20px #fff; 19} 20 21.snow { 22 position: relative; 23 display: flex; 24 z-index: 1; 25} 26 27.snow span { 28 position: relative; 29 width: 3px; 30 height: 3px; 31 background: #fff; 32 margin: 0 2px; 33 border-radius: 50%; 34 animation: snowing 5s linear infinite; 35 animation-duration: calc(15s / var(--i)); 36 transform-origin: bottom; 37} 38 39@keyframes snowing { 40 0% { 41 transform: translateY(0px); 42 } 43 44 70% { 45 transform: translateY(100px) scale(1); 46 } 47 48 100% { 49 transform: translateY(100px) scale(0); 50 } 51}
HTML
1<div class="loader"> 2 <div class="snow"> 3 <span style="--i:11"></span> 4 <span style="--i:12"></span> 5 <span style="--i:15"></span> 6 <span style="--i:17"></span> 7 <span style="--i:18"></span> 8 <span style="--i:13"></span> 9 <span style="--i:14"></span> 10 <span style="--i:19"></span> 11 <span style="--i:20"></span> 12 <span style="--i:10"></span> 13 <span style="--i:18"></span> 14 <span style="--i:13"></span> 15 <span style="--i:14"></span> 16 <span style="--i:19"></span> 17 <span style="--i:20"></span> 18 <span style="--i:10"></span> 19 <span style="--i:18"></span> 20 <span style="--i:13"></span> 21 <span style="--i:14"></span> 22 <span style="--i:19"></span> 23 <span style="--i:20"></span> 24 <span style="--i:10"></span> 25 </div> 26</div>