Loader by doniaskima
#e8e8e8
1/* HTML: <div class="loader"></div> */ 2.loader { 3 width: 100px; 4 height: 45px; 5 position: relative; 6} 7 8.loader:before, 9.loader:after { 10 content: ""; 11 position: absolute; 12 inset: 0; 13 background: #000; 14 box-shadow: 0 0 0 50px; 15 clip-path: polygon(-50px -20px,10% -12px,20% 0,calc(50% - 15px) 0,calc(50% - 10px) -20px,calc(50% - 8px) -15px,calc(50% + 8px) -15px,calc(50% + 10px) -20px,calc(50% + 15px) 0,80% 0,90% -12px,calc(100% + 50px) -20px,100% 80%,calc(100% + 10px) calc(100% + 10px),60% 100%,50% calc(100% + 15px),40% 100%,-10px calc(100% + 10px),0 80%); 16} 17 18.loader:after { 19 animation: l9 1s infinite; 20 transform: perspective(300px) translateZ(0px) 21} 22 23@keyframes l9 { 24 to { 25 transform: perspective(300px) translateZ(100px); 26 opacity: 0 27 } 28}
552 views
552 views
MIT License