How to create Loader with CSS

How to create Loader with CSS

Here is very simple and fast way to create Loader with CSS with working demo. No matter if you are beginner, You can also create this loader. Just need little bit  knowledge of CSS and HTML. Loader are useful if your site is little bit slow. User will not like to wait while page is loading. so you need some way not to bore your User while your site is loading. We are here to help you.

Follow this easy Steps to make Loader with CSS .

Working Demo is here

Let’s Start Coding part of this Loader

<!DOCTYPE html>
	<title>Css Loader</title>
	<style type="text/css">
		position: absolute;
		width: 400px;
		margin-left: -200px;
		height: 30px;
		background: rgba(255, 127, 80, 0.2);
		top: 50%;
		left: 50%;
		overflow: hidden;
		border-radius: 5px;
		border: 1px solid #ccc;
		box-shadow: 0px 0px 7px 1px rgba(255, 127, 80, 0.3);
		content: "";
		width: 70px;
		height: 100%;
		border-radius: 5px;
		background: coral;
		position: absolute;
		-webkit-animation: leftRight 1.9s ease infinite;
		animation: leftRight 1.9s ease infinite;
	@-webkit-keyframes leftRight{
		0%{left: 0%;}
		50%{left: calc(100% - 70px);}
		to{left: 0%;}
	@keyframes leftRight {
		0%{left: 0%;}
		50%{left: calc(100% - 70px);}
		to{left: 0%;}
	<div class="loading-wrapper"></div>

Take a look on the code. We are created this loader with the help of CSS pseudoelement.
Hope you will Enjoy this Tutorial. Please Subscribe us to update with our every trick. We are also hungry to hear from you. If you have any suggestion and any idea to make it more better then please share with us.
Keep sharing this 🙂

Related posts

How to Create Sliding sidebar


How To Create Css Loader



Karan December 7, 2017 at 5:35 pm

Nice tutorial

Sangeet Kumar December 8, 2017 at 2:09 am


vishal December 23, 2017 at 7:09 am

nyc creation


Leave a Comment