Loader Experiment (using clip-path)

HTML
<div class="title">LOADING</div>
CSS
body { font-family: sans-serif; font-weight: 700; display: flex; justify-content: center; align-items: center; height: 100vh; font-size: 10vw; background: #bdc3c7; } .title { position: relative; color: #262626; padding: 20px 50px; } .title:before { background: #262626; color: white; content: 'LOADING'; overflow: hidden; position: absolute; top: 0; left: 0; padding: 20px 50px; -webkit-clip-path: polygon(0% 0% , 30% 0%, 30% 100%, 0% 100%); clip-path: polygon(0% 0% , 30% 0%, 30% 100%, 0% 100%); animation: slide 4s 1s linear infinite; } @keyframes slide { 50% { -webkit-clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 70% 100%); } }
JAVASCRIPT
Expand for more options Login