Simple loader with CSS and HTML

mohsenet — Wed, 15 Dec 2021 06:23:19 +0000

Here is a simple loader.

HTML

<div class="center">
  <div class="loader1">.</div>
  <div class="loader2">.</div>
</div>

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)}
}

also you can see at codepen
Thank you your attention

DEV Community: mohsenet

Simple loader with CSS and HTML