DEV Community

Cover image for Simple loader with CSS and HTML
mohsenet
mohsenet

Posted on

Simple loader with CSS and HTML

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)