CSS loader create using only pure custom CSS

You can use this CSS loader for your own website free just copy HTML or CSS code from below.

If you search another CSS loader than you check this Custom CSS Wave Loader this is also very easy to implement on your website.

I am using pure custom CSS animation effect this CSS loader support all type of modern browsers like Mozilla Firefox and Google chrome.

You can also customize this by download source file then open CSS file on any text editor and customize as you like.

If this loader does not work then you can also follow loading.io website they publish lots of CSS loader for website preload you can also use loader from this website.

But I suggest you if this loader don’t support on your browser then you can use gif format image loader.

Some old browser does not support loader then you try this ‘-webkit-‘ to use CSS loader.

I hope you like this CSS loader, if you use this then I am very happy. thank you!

HTML

<div class="loader">
  <div class="b line1"></div>
  <div class="b line2"></div>
  <div class="b line3"></div>
  <div class="b line4"></div>
</div>

CSS

body {
  margin:0;
  padding:0;
  background: #3d3d3d;
}
.loader {
  width:200px;
  height:200px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  overflow:hidden;
}
.loader .b {
  border-radius:50%;
  border-left: 4px solid;
  border-right: 4px solid;
  border-top: 4px solid transparent !important;
  border-bottom: 4px solid transparent !important;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  animation: rot 2s infinite;
}
.loader .line1 {
  border-color: #EF6C00;
  width:120px;
  height:120px;
}
.loader .line2 {
  border-color: #558B2F;
  width:100px;
  height:100px;
  animation-delay: 0.2s;
}
.loader .line3 {
  border-color: #0288D1;
  width:80px;
  height:80px;
  animation-delay: 0.4s;
}
.loader .line4 {
  border-color: #F44336;
  width:60px;
  height:60px;
  animation-delay: 0.6s;
}
@keyframes rot {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

2 Comments

  1. I revealed a lot of attractive stuffs contained by your blog particularly its conversation. This is my first occasion I visit here. Well, this is a very valuable post. Thanks for the information you provided. It would be great if got more post like this. I appreciate it.

Leave a Reply