octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
              <div class="container">
   <div class="box">
			<div class="clock"></div>
			<p>Clock</p>
		</div>

		<div class="box">
			<div class="hourglass"></div>
			<p>Hourglass</p>
		</div>

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

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

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

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

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

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

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

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

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

		<div class="box">
			<div class="loader10"></div>
			<p>loader 10 </p>
		</div>
</div>
            
          
!

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Lato:300);


.container{
	text-align: center;
	background-color: #e74c3c;
	overflow: hidden;
}

.box:nth-child(2n-1){
	background-color: rgba(0,0,0,0.05);
}

.box{
	display: inline-block;
	height: 200px;
	width: 33.3%;
	float:left;
	position: relative;
	/*margin:0 -4px -5px -2px;*/
	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 QUERIES */
@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);
	}

}


/* -------------- Clock -------------- */

.clock{
	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);
}
.clock: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);}
}

.clock:before{
	content: "";
	position: absolute;
	background-color: #fff;
	top:6px;
	left: 48%;
	height: 35px;
	width: 4px;
	border-radius: 5px;
	-webkit-transform-origin: 50% 94%;
			transform-origin: 50% 94%;
	-webkit-animation: ptAiguille 12s linear infinite;
			animation: ptAiguille 12s linear infinite;
}

@-webkit-keyframes ptAiguille{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

@keyframes ptAiguille{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}


/* -------------- Sablier -------------- */

.hourglass{
	position: relative;
	height: 80px;
	width: 80px;
	top: 28%;
	top: -webkit-calc(50% - 43px);
	top: calc(50% - 43px);
	left: 35%;
	left: -webkit-calc(50% - 43px);
	left: calc(50% - 43px);
	border: 3px solid #fff;
	border-radius: 80px;
	-webkit-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
	-webkit-animation: hourglass 2s ease-in-out infinite;
			animation: hourglass 2s ease-in-out infinite;
}

.hourglass:before{
	content: "";
	position: absolute;
	top:8px;
	left: 18px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 37px 22px 0 22px;
	border-color: #fff transparent transparent transparent;
}
.hourglass:after{
	content: "";
	position: absolute;
	top: 35px;
	left: 18px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 22px 37px 22px;
	border-color: transparent transparent #fff transparent;
}

@-webkit-keyframes hourglass{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(180deg);}
}

@keyframes hourglass{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(180deg);}
}

/* -------------- Loader1 -------------- */

.loader1{
	position: relative;
	height: 80px;
	width: 80px;
	border-radius: 80px;
	border: 3px solid  rgba(255,255,255, .7);

	top: 28%;
	top: -webkit-calc(50% - 43px);
	top: calc(50% - 43px);
	left: 35%;
	left: -webkit-calc(50% - 43px);
	left: calc(50% - 43px);

	-webkit-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
	-webkit-animation: loader1 3s linear infinite;
			animation: loader1 3s linear infinite;
}

.loader1:after{
	content: "";
	position: absolute;
	top: -5px;
	left: 20px;
	width: 11px;
	height: 11px;
	border-radius: 10px;
	background-color: #fff;
}

@-webkit-keyframes loader1{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

@keyframes loader1{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}


/* -------------- loader2 -------------- */

.loader2{
	position: relative;
	width: 5px;
	height: 5px;

	top: 49%;
	top: -webkit-calc(50% - 43px);
	top: calc(50% - 2.5px);
	left: 49%;
	left: -webkit-calc(50% - 43px);
	left: calc(50% - 2.5px);

	background-color: #fff;
	border-radius: 50px;
}

.loader2:before{
	content: "";
	position: absolute;
	top: -38px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	border-radius: 0 50px 0px  0;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, .1);
	-webkit-transform-origin:  0% 100%;
			transform-origin:  0% 100% ;
	-webkit-animation: loader2 1.5s linear infinite;
			animation: loader2 1.5s linear infinite;
}

.loader2:after{
	content: "";
	position: absolute;
	top: 2px;
	right: 2px;
	border-bottom: 3px solid #fff;
	border-left: 3px solid #fff;
	border-radius: 0 0px 0px  50px;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, .1);
	-webkit-transform-origin:  100% 0%;
			transform-origin:  100% 0% ;
	-webkit-animation: loader2 1.5s linear infinite;
			animation: loader2 1.5s linear infinite;
}



@-webkit-keyframes loader2{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

@keyframes loader2{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}


/* -------------- loader3 -------------- */

.loader3{
	position: relative;
	width: 150px;
	height: 20px;

	top: 45%;
	top: -webkit-calc(50% - 10px);
	top: calc(50% - 10px);
	left: 25%;
	left: -webkit-calc(50% - 75px);
	left: calc(50% - 75px);
}

.loader3:after{
	content: "LOADING ...";
	color: #fff;
	font-family:  Lato,"Helvetica Neue" ;
	font-weight: 200;
	font-size: 16px;
	position: absolute;
	width: 100%;
	height: 20px;
	line-height: 20px;
	left: 0;
	top: 0;
	background-color: #e74c3c;
	z-index: 1;
}

.loader3:before{
	content: "";
	position: absolute;
	background-color: #fff;
	top: -5px;
	left: 0px;
	height: 30px;
	width: 0px;
	z-index: 0;
	opacity: 1;
	-webkit-transform-origin:  100% 0%;
			transform-origin:  100% 0% ;
	-webkit-animation: loader3 10s ease-in-out infinite;
			animation: loader3 10s ease-in-out infinite;
}



@-webkit-keyframes loader3{
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

@keyframes loader3{
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

/* -------------- loader4 -------------- */

.loader4{
	position: relative;
	width: 150px;
	height: 20px;

	top: 45%;
	top: -webkit-calc(50% - 10px);
	top: calc(50% - 10px);
	left: 25%;
	left: -webkit-calc(50% - 75px);
	left: calc(50% - 75px);

	background-color: rgba(255,255,255,0.2);
}

.loader4:before{
	content: "";
	position: absolute;
	background-color: #fff;
	top: 0px;
	left: 0px;
	height: 20px;
	width: 0px;
	z-index: 0;
	opacity: 1;
	-webkit-transform-origin:  100% 0%;
			transform-origin:  100% 0% ;
	-webkit-animation: loader4 10s ease-in-out infinite;
			animation: loader4 10s ease-in-out infinite;
}

.loader4:after{
	content: "LOADING ...";
	color: #fff;
	font-family:  Lato,"Helvetica Neue" ;
	font-weight: 200;
	font-size: 16px;
	position: absolute;
	width: 100%;
	height: 20px;
	line-height: 20px;
	left: 0;
	top: 0;
}

@-webkit-keyframes loader4{
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

@keyframes loader4{
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

/* -------------- loader5 -------------- */
.loader5{
	position: relative;
	width: 150px;
	height: 20px;

	top: 45%;
	top: -webkit-calc(50% - 10px);
	top: calc(50% - 10px);
	left: 25%;
	left: -webkit-calc(50% - 75px);
	left: calc(50% - 75px);

	background-color: rgba(255,255,255,0.2);
}

.loader5:after{
	content: "LOADING ...";
	color: #fff;
	font-family:  Lato,"Helvetica Neue" ;
	font-weight: 200;
	font-size: 16px;
	position: absolute;
	width: 100%;
	height: 20px;
	line-height: 20px;
	left: 0;
	top: 0;
}

.loader5:before{
	content: "";
	position: absolute;
	background-color: #fff;
	top: 0px;
	height: 20px;
	width: 0px;
	z-index: 0;
	-webkit-transform-origin:  100% 0%;
			transform-origin:  100% 0% ;
	-webkit-animation: loader5 7s ease-in-out infinite;
			animation: loader5 7s ease-in-out infinite;
}

@-webkit-keyframes loader5{
    0%{width: 0px; left: 0px}
    48%{width: 100%; left: 0px}
    50%{width: 100%; right: 0px}
    52%{width: 100%; right: 0px}
    100%{width: 0px; right: 0px}
}

@keyframes loader5{
    0%{width: 0px; left: 0px}
    48%{width: 100%; left: 0px}
    50%{width: 100%; right: 0px}
    52%{width: 100%; right: 0px}
    100%{width: 0px; right: 0px}
}

/* -------------- loader6 -------------- */

.loader6{
	position: relative;
	width: 12px;
	height: 12px;

	top: 46%;
	top: -webkit-calc(50% - 6px);
	top: calc(50% - 6px);
	left: 46%;
	left: -webkit-calc(50% - 6px);
	left: calc(50% - 6px);
	
	border-radius: 12px;
	background-color: #fff;
	-webkit-transform-origin:  50% 50%;
			transform-origin:  50% 50% ;
	-webkit-animation: loader6 1s ease-in-out infinite;
			animation: loader6 1s ease-in-out infinite;
}

.loader6:before{
	content: "";
	position: absolute;
	background-color: rgba(255, 255, 255, .5);
	top: 0px;
	left: -25px;
	height: 12px;
	width: 12px;
	border-radius: 12px;
}

.loader6:after{
	content: "";
	position: absolute;
	background-color: rgba(255, 255 ,255 ,.5);
	top: 0px;
	left: 25px;
	height: 12px;
	width: 12px;
	border-radius: 12px;
}


@-webkit-keyframes loader6{
    0%{-webkit-transform:rotate(0deg);}
    50%{-webkit-transform:rotate(180deg);}
    100%{-webkit-transform:rotate(180deg);}
}

@keyframes loader6{
    0%{transform:rotate(0deg);}
    50%{transform:rotate(180deg);}
    100%{transform:rotate(180deg);}
}

/* -------------- loader7 -------------- */

.loader7{
	position: relative;
	width: 40px;
	height: 40px;

	top: 40%;
	top: -webkit-calc(50% - 20px);
	top: calc(50% - 20px);
	left: 43%;
	left: -webkit-calc(50% - 20px);
	left: calc(50% - 20px);

	background-color: rgba(255, 255, 255, .2);
}

.loader7:before{
	content: "";
	position: absolute;
	background-color: #fff;
	height: 10px;
	width: 10px;
	border-radius: 10px;
	-webkit-animation: loader7 2s ease-in-out infinite;
			animation: loader7 2s ease-in-out infinite;
}

.loader7:after{
	content: "";
	position: absolute;
	background-color: #fff;
	top: 0px;
	left: 0px;
	height: 40px;
	width: 0px;
	z-index: 0;
	opacity: 1;
	-webkit-animation: loader72 10s ease-in-out infinite;
			animation: loader72 10s ease-in-out infinite;
}


@-webkit-keyframes loader7{
    0%{left: -12px; top: -12px;}
    25%{left:42px; top:-12px;}
    50%{left: 42px; top: 42px;}
    75%{left: -12px; top: 42px;}
    100%{left:-12px; top:-12px;}
}

@keyframes loader7{
    0%{left: -12px; top: -12px;}
    25%{left:42px; top:-12px;}
    50%{left: 42px; top: 42px;}
    75%{left: -12px; top: 42px;}
    100%{left:-12px; top:-12px;}
}

@-webkit-keyframes loader72{
    0%{width: 0px;}
    70%{width: 40px; opacity: 1;}
    90%{opacity: 0; width: 40px;}
    100%{opacity: 0;width: 0px;}
}

@keyframes loader72{
    0%{width: 0px;}
    70%{width: 40px; opacity: 1;}
    90%{opacity: 0; width: 40px;}
    100%{opacity: 0;width: 0px;}
}

/* -------------- loader8 -------------- */

.loader8{
	position: relative;
	width: 80px;
	height: 80px;

	top: 28%;
	top: -webkit-calc(50% - 43px);
	top: calc(50% - 43px);
	left: 35%;
	left: -webkit-calc(50% - 43px);
	left: calc(50% - 43px);

	border-radius: 50px;
	background-color: rgba(255, 255, 255, .2);
	border-width: 40px;
	border-style: double;
	border-color:transparent  #fff;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
		box-sizing:border-box;

	-webkit-transform-origin:  50% 50%;
		transform-origin:  50% 50% ;
	-webkit-animation: loader8 2s linear infinite;
		animation: loader8 2s linear infinite;
	
}




@-webkit-keyframes loader8{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

@keyframes loader8{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}


/* -------------- loader9 -------------- */

.loader9:before{
	content: "";
	position: absolute;
	top: 0px;
	height: 12px;
	width: 12px;
	border-radius: 12px;
	-webkit-animation: loader9g 3s ease-in-out infinite;
			animation: loader9g 3s ease-in-out infinite;
}

.loader9{
	position: relative;
	width: 12px;
	height: 12px;
	top: 46%;
	left: 46%;
	border-radius: 12px;
	background-color: #fff;
}


.loader9:after{
	content: "";
	position: absolute;
	top: 0px;
	height: 12px;
	width: 12px;
	border-radius: 12px;
	-webkit-animation: loader9d 3s ease-in-out infinite;
			animation: loader9d 3s ease-in-out infinite;
}

@-webkit-keyframes loader9g{
	0%{	left: -25px; background-color: rgba(255, 255, 255, .8); }
	50%{ left: 0px; background-color: rgba(255, 255, 255, .1);}
	100%{ left:-25px; background-color: rgba(255, 255, 255, .8); }
}
@keyframes loader9g{
	0%{	left: -25px; background-color: rgba(255, 255, 255, .8); }
	50%{ left: 0px; background-color: rgba(255, 255, 255, .1);}
	100%{ left:-25px; background-color: rgba(255, 255, 255, .8); }
}


@-webkit-keyframes loader9d{
	0%{	left: 25px; background-color: rgba(255, 255, 255, .8); }
	50%{ left: 0px; background-color: rgba(255, 255, 255, .1);}
	100%{ left:25px; background-color: rgba(255, 255, 255, .8); }
}
@keyframes loader9d{
	0%{	left: 25px; background-color: rgba(255, 255, 255, .8); }
	50%{ left: 0px; background-color: rgba(255, 255, 255, .1);}
	100%{ left:25px; background-color: rgba(255, 255, 255, .8); }
}

/* -------------- loader10 -------------- */

.loader10:before{
	content: "";
	position: absolute;
	top: 0px;
	left: -25px;
	height: 12px;
	width: 12px;
	border-radius: 12px;
	-webkit-animation: loader10g 3s ease-in-out infinite;
			animation: loader10g 3s ease-in-out infinite;
}

.loader10{
	position: relative;
	width: 12px;
	height: 12px;
	top: 46%;
	left: 46%;
	border-radius: 12px;
	-webkit-animation: loader10m 3s ease-in-out infinite;
			animation: loader10m 3s ease-in-out infinite;
}


.loader10:after{
	content: "";
	position: absolute;
	top: 0px;
	left: 25px;
	height: 10px;
	width: 10px;
	border-radius: 10px;
	-webkit-animation: loader10d 3s ease-in-out infinite;
			animation: loader10d 3s ease-in-out infinite;
}

@-webkit-keyframes loader10g{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, 1);}
	50%{background-color: rgba(255, 255, 255, .2);}
	75%{background-color: rgba(255, 255, 255, .2);}
	100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10g{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, 1);}
	50%{background-color: rgba(255, 255, 255, .2);}
	75%{background-color: rgba(255, 255, 255, .2);}
	100%{background-color: rgba(255, 255, 255, .2);}
}

@-webkit-keyframes loader10m{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, .2);}
	50%{background-color: rgba(255, 255, 255, 1);}
	75%{background-color: rgba(255, 255, 255, .2);}
	100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10m{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, .2);}
	50%{background-color: rgba(255, 255, 255, 1);}
	75%{background-color: rgba(255, 255, 255, .2);}
	100%{background-color: rgba(255, 255, 255, .2);}
}

@-webkit-keyframes loader10d{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, .2);}
	50%{background-color: rgba(255, 255, 255, .2);}
	75%{background-color: rgba(255, 255, 255, 1);}
	100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10d{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, .2);}
	50%{background-color: rgba(255, 255, 255, .2);}
	75%{background-color: rgba(255, 255, 255, 1);}
	100%{background-color: rgba(255, 255, 255, .2);}
}
            
          
!

JS

            
              
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console