Loader by doniaskima
#e8e8e8
1/* HTML: <div class="loader"></div> */ 2.loader { 3 width: 80px; 4 height: 40px; 5 border-radius: 100px 100px 0 0; 6 position: relative; 7 overflow: hidden; 8} 9 10.loader:before { 11 content: ""; 12 position: absolute; 13 inset: 0 0 -100%; 14 background: radial-gradient(farthest-side,#ffd738 80%,#0000) left 70% top 20%/15px 15px, 15 radial-gradient(farthest-side,#020308 92%,#0000) left 65% bottom 19%/12px 12px, 16 radial-gradient(farthest-side,#ecfefe 92%,#0000) left 70% bottom 20%/15px 15px, 17 linear-gradient(#9eddfe 50%,#020308 0); 18 background-repeat: no-repeat; 19 animation: l5 2s infinite; 20} 21 22@keyframes l5 { 23 0%,20% { 24 transform: rotate(0) 25 } 26 27 40%,60% { 28 transform: rotate(.5turn) 29 } 30 31 80%,100% { 32 transform: rotate(1turn) 33 } 34} 35
453 views
453 views
MIT License