DEV Community

Cover image for Simple loader with CSS and HTML
mohsenet
mohsenet

Posted on

Simple loader with CSS and HTML

#html #css

Here is a simple loader.

HTML

<div class="center"> <div class="loader1">.</div> <div class="loader2">.</div> </div>
Enter fullscreen mode Exit fullscreen mode

CSS

.center { display: grid; place-items: center; height: 90vh; font-size: 7rem; color: #acf; } .loader1 { position: absolute; animation: motion 1s linear infinite; } .loader2 { position: absolute; animation: motion 1.5s linear infinite; } @keyframes motion{ 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} }
Enter fullscreen mode Exit fullscreen mode

also you can see at codepen
Thank you your attention

Top comments (0)