#212121
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}
3.2K views
3.2K views
Comments
MIT License