Dot and Square Animation
Home
Snippets
Dot and Square Animation
HTML
CSS
JS
<div class="box"> <div class="loader"></div> </div>
body{ height: 100vh; background-color: #333; margin: 0; display: grid; place-items: center; } .loader{ background-color: #ffffff33; width: 40px; height: 40px; position: relative; } .loader:before{ content: ""; position: absolute; background-color: #fff; height: 10px; width: 10px; border-radius: 10px; animation: dot 2s ease-in-out infinite; } @keyframes dot{ 0%{left: -12px; top: -12px;} 25%{left:42px; top:-12px;} 50%{left: 42px; top: 42px;} 75%{left: -12px; top: 42px;} 100%{left:-12px; top:-12px;} } .loader:after{ content: ""; position: absolute; background-color: #fff; top: 0px; left: 0px; height: 40px; width: 0px; z-index: 0; opacity: 1; animation: box 10s ease-in-out infinite; } @keyframes box{ 0%{width: 0px;} 70%{width: 40px; opacity: 1;} 90%{opacity: 0; width: 40px;} 100%{opacity: 0;width: 0px;} }
//javascript
Ad #1
Ad #2
Scroll to Top