How to Make Loading Bar for Website

In this post, I will show you how to make loading bar for website. You can see demo of loading bar using click below button and also available source code in free.

Demo / Download
  • Index.html
  • style.css

1: Index.html

First you create index.html file and paste following code in it.

<body>
	<div class="page-loader-wrapper-1"> 
		<div class="loader">
			<div class="stick1"></div>
			<div class="stick2"></div>
			<div class="stick3"></div>
			<div class="stick4"></div> 
		</div>   
	</div>
</body>

2: Style.css

Then create a style.css file and following code paste in it.

.page-loader-wrapper-1 {
  overflow: hidden;
  background-color: #f3f3f3; 
}
.page-loader-wrapper-1 .loader {
  width: 40px;
  height: 40px;
  margin: auto;
  position: absolute;
  left: -58px;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999; 
}
.page-loader-wrapper-1 .stick1, .page-loader-wrapper-1 .stick2, .page-loader-wrapper-1 .stick3, .page-loader-wrapper-1 .stick4 {
  background-color: #bd2428;
  width: 50px;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  -webkit-animation: sk-cubemove 1.8s infinite linear;
  animation: sk-cubemove 1.8s infinite linear; 
}
.page-loader-wrapper-1 .stick1, .page-loader-wrapper-1 .stick3 {
  background-color: #0f1923; 
}
.page-loader-wrapper-1 .stick2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s; 
}
.page-loader-wrapper-1 .stick3 {
  -webkit-animation-delay: -1.35s;
  animation-delay: -1.35s; 
}
.page-loader-wrapper-1 .stick4 {
  -webkit-animation-delay: -0.45s;
  animation-delay: -0.45s; 
}

@-webkit-keyframes sk-cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.9); 
  }

  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); 
  }

  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.9); 
  }

  100% {
    -webkit-transform: rotate(-360deg); 
  } 
}

@keyframes sk-cubemove {
  /*Map-----------*/
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.9);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.9); 
  }

  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); 
  }

  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); 
  }

  75% {
    transform: translateX(20px) translateY(42px) rotate(-270deg) scale(0.9);
    -webkit-transform: translateX(20px) translateY(42px) rotate(-270deg) scale(0.9); 
  }

  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg); 
  } 
}

Conclusion

Today we learnt how to make loading bar for website using HTML & CSS, you can add multiple loading bar for every page just by adding the HTML markup on each pages.

If you found this tutorial helpful, share it with your friends and developers group.

Demo / Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Leave a Reply

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