Css Loader

by Venkatesh Dematti

HTML

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Loaders | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
   <div class="box">
			<div class="loader1"></div>
			<p>loader1</p>
		</div>

		<div class="box">
			<div class="loader2"></div>
			<p>loader2</p>
		</div>

		<div class="box">
			<div class="loader3"></div>
			<p>Loader 1</p>
		</div>

		<div class="box">
			<div class="loader4"></div>
			<p>loader 2</p>
		</div>

		<div class="box">
			<div class="loader5"></div>
			<p>loader 3</p>
		</div>

		<div class="box">
			<div class="loader6"></div>
			<p>loader 4</p>
		</div>

		<div class="box">
			<div class="loader7"></div>
			<p>loader 5</p>
		</div>

		<div class="box">
			<div class="loader8"></div>
			<p>loader 6</p>
		</div>

		<div class="box">
			<div class="loader9"></div>
			<p>loader 7</p>
		</div>

		<div class="box">
			<div class="loader30"></div>
			<p>loader 8</p>
		</div>

		<div class="box">
			<div class="loader31"></div>
			<p>loader 9</p>
		</div>

		<div class="box">
			<div class="loader32"></div>
			<p>loader 10 </p>
		</div>
</div>
  
</body>
</html>

CSS

/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url(https://fonts.googleapis.com/css?family=Lato:300);
.container{
	text-align: center;
	background-color: #208bfd;
	overflow: hidden;
}
.box:nth-child(2n-1){
	background-color: rgba(0,0,0,0.1);
}
.box{
	display: inline-block;
	height: 200px;
	width: 33.3%;
	float:left;
	position: relative;
	transition: all .2s ease;
}
.box p{
	color: #777;
	font-family:  Lato,"Helvetica Neue" ;
	font-weight: 300;
	position: absolute;
	font-size: 20px;
	width: 100%;
	height: 25px;
	text-align: center;
	bottom: 0px;
	margin: 0;
	top:160px;
	background-color: #fff;
	opacity: 0;
	text-transform: uppercase;
	transition: all .2s ease;
}
.box:hover p{
	bottom:0px;
	top:175px;
	opacity: 1;
	transition: all .2s ease;
	z-index: 2;
}
@media (max-width: 700px){
	.box{
		width: 50%;
	}
	.box:nth-child(2n-1){
		background-color: inherit;
	}
	.box:nth-child(4n),.box:nth-child(4n-3) {
		background-color: rgba(0,0,0,0.05);
	}

}
@media (max-width: 420px){
	.box{
		width: 100%;
	}
	.box:nth-child(4n),.box:nth-child(4n-3){
		background-color: inherit;
	}
	.box:nth-child(2n-1){
		background-color:rgba(0,0,0,0.05);
	}
}
.loader1{
	border-radius: 60px;
	border: 3px solid #fff;
	height: 80px;
	width: 80px;
	position: relative;
	top: 28%;
	top: -webkit-calc(50% - 43px);
	top: calc(50% - 43px);
	left: 35%;
	left: -webkit-calc(50% - 43px);
	left: calc(50% - 43px);
}
.loader1:after{
	content: "";
	position: absolute;
	background-color: #fff;
	top:2px;
	left: 48%;
	height: 38px;
	width: 4px;
	border-radius: 5px;
	-webkit-transform-origin: 50% 97%;
			transform-origin: 50% 97%;
	-webkit-animation: grdAiguille 2s linear infinite;
			animation: grdAiguille 2s linear infinite;
}
@-webkit-keyframes grdAiguille{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}
@keyframes grdAiguille{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
.loader1:before{
	content: "";
	position:...