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)

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.