CSS Spinners / Loaders

Super Simple CSS Spinners / Loaders

In this video, I’m gonna show you how to create a super simple CSS loader / spinner



HTML Code

For HTML we have a div with class of .loading

<div class="loading"></div>

CSS Code

In CSS we have:

  • For the body tag some basic styles
  • for the div with class of .loading some base css and animation name
  • finally the animation or CSS Keyframes

NOTE: Watch the video for the explanation!

body {
  margin-top: 100px;
  background: #137b;
  text-align: center;
}
.loading {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

About the author

Leave a Reply

Your email address will not be published. Required fields are marked *