Beautiful simple light weighted animated Attractive loader using Pure CSS, HTML only. Demo and Download the zip (*.zip).
Awesome loader code below
HTML Snippet
<div class="loader"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
CSS Snippet
html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } *, *:before, *:after { box-sizing: border-box; outline: none; } html { font-family: 'Source Sans Pro', sans-serif; font-size: 16px; font-smooth: auto; font-weight: 300; line-height: 1.5; color: #444; } body { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; } .loader { position: relative; display: grid; grid-template-columns: 33% 33% 33%; grid-gap: 2px; width: 100px; height: 100px; } .loader > div { position: relative; display: inline-block; width: 100%; height: 100%; background: tomato; transform: scale(0); transform-origin: center center; animation: loader 2s infinite linear; } .loader > div:nth-of-type(1), .loader > div:nth-of-type(5), .loader > div:nth-of-type(9) { animation-delay: 0.4s; } .loader > div:nth-of-type(4), .loader > div:nth-of-type(8) { animation-delay: 0.2s; } .loader > div:nth-of-type(2), .loader > div:nth-of-type(6) { animation-delay: 0.6s; } .loader > div:nth-of-type(3) { animation-delay: 0.8s; } @keyframes loader { 0% { transform: scale(0); } 40% { transform: scale(1); } 80% { transform: scale(1); } 100% { transform: scale(0); } }
Find the demo below
See the Pen Fun Little Loader by Joshua Ward (@joshua_ward) on CodePen.
Leave a Reply