.loader{background:#101010;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;-webkit-transform:translateZ(1px);overflow:hidden;}

.center-box,.loading-sec{width:200px;height:200px;margin:-200px 0 0 -100px;left:50%;top:50%;position:absolute;text-align:center}
.loading-sec{z-index:10;margin-top:-150px}

.rect{width:2px;float:left;background:#ffffff;float:left;margin:0 35px 0 0;position:absolute;}

.rect-1{height:200px;background:#ffffff;left:0}
.rect-2{height:90px;left:35px;-webkit-opacity:0;-moz-opacity:0;opacity:0;}
.rect-3{height:350px;left:70px;top:-75px;-webkit-opacity:0;-moz-opacity:0;opacity:0;}
.rect-4{height:275px;left:105px;}
.rect-5{height:175px;left:140px;background:#ffffff}
.rect-6{height:75px;background:#ffffff;left:175px}


.visible-loader .rect-1{-webkit-animation:rect-1-animation 1.5s linear infinite;-moz-animation:rect-1-animation 1.5s linear infinite;-o-animation:rect-1-animation 1.5s linear infinite;animation:rect-1-animation 1.5s linear infinite}
.visible-loader .rect-2{-webkit-animation:rect-2-animation 1.5s linear .8s infinite;-moz-animation:rect-2-animation 1.5s linear .8s infinite;-o-animation:rect-2-animation 1.5s linear .8s infinite;animation:rect-2-animation 1.5s linear .8s infinite}
.visible-loader .rect-3{-webkit-animation:rect-3-animation 1.1s linear .5s infinite;-moz-animation:rect-3-animation 1.1s linear .5s infinite;-o-animation:rect-3-animation 1.1s linear .5s infinite;animation:rect-3-animation 1.1s linear .5s infinite}
.visible-loader .rect-4{-webkit-animation:rect-4-animation 2s linear infinite;-moz-animation:rect-4-animation 2s linear infinite;-o-animation:rect-4-animation  2s linear infinite;animation:rect-4-animation  2s linear infinite}
.visible-loader .rect-5{-webkit-animation:rect-1-animation 1.2s linear .1s infinite;-moz-animation:rect-1-animation 1.2s linear .1s infinite;-o-animation:rect-1-animation 1.2s linear .1s infinite;animation:rect-1-animation 1.2s linear .1s infinite}
.visible-loader .rect-6{-webkit-animation:rect-3-animation 1.7s linear infinite;-moz-animation:rect-3-animation 1.7s linear infinite;-o-animation:rect-3-animation 1.7s linear infinite;animation:rect-3-animation 1.7s linear infinite}

.diagonal-effect{-webkit-transform:skew(-22deg);-moz-transform:skew(-22deg);transform:skew(-22deg);width:100%;height:100%;position:relative;overflow:hidden;}

@keyframes rect-1-animation {
	0% {
		top:-150px;
		opacity:0
	}
	50% {
		top:50px;
		opacity:1
	}
	75% {
		top: 100px;
		opacity:0
	}
	100% {
		top: 100px;
		opacity:0
	}
}

@keyframes rect-2-animation {
	0% {

		top:-20px;
		opacity:0
	}
	50% {

		top:50px;
		opacity:1
	}
	100% {

		top: 100px;
		opacity:0
	}
}

@keyframes rect-3-animation {
	0% {
		top:-75px;
		opacity:0
	}
	50% {
		top:50px;
		opacity:1
	}
	100% {
		top: 100px;
		opacity:0
	}
}

@keyframes rect-4-animation {
	0% {
		top:25px;
		opacity:0
	}
	50% {
		top:100px;
		opacity:1
	}
	100% {
		top: 150px;
		opacity:0
	}
}

@-webkit-keyframes rect-1-animation {
	0% {
		top:-50px;
		-webkit-opacity:0
	}
	50% {
		top:50px;
		-webkit-opacity:1
	}
	100% {
		top  : 100px;
		-webkit-opacity:0
	}
}

@-webkit-keyframes rect-2-animation {
	0% {

		top:-20px;
		-webkit-opacity:0
	}
	50% {

		top:50px;
		-webkit-opacity:1
	}
	100% {

		top: 100px;
		-webkit-opacity:0
	}
}

@-webkit-keyframes rect-3-animation {
	0% {
		top:-75px;
		-webkit-opacity:0
	}
	50% {
		top:50px;
		-webkit-opacity:1
	}
	100% {
		top: 100px;
		-webkit-opacity:0
	}
}

@-webkit-keyframes rect-4-animation {
	0% {
		top:25px;
		-webkit-opacity:0
	}
	50% {
		top:100px;
		-webkit-opacity:1
	}
	100% {
		top: 150px;
		-webkit-opacity:0
	}
}

@-moz-keyframes rect-1-animation {
	0% {
		top:-50px;
		-moz-opacity:0;
		opacity:0;
	}
	50% {
		top:50px;
		-moz-opacity:1;
		opacity:1;
	}
	100% {
		top  : 100px;
		-moz-opacity:0
	}
}

@-moz-keyframes rect-2-animation {
	0% {

		top:-20px;
		-moz-opacity:0;
		opacity:0;
	}
	50% {

		top:50px;
		-moz-opacity:1;
		opacity:1;
	}
	100% {

		top: 100px;
		-moz-opacity:0;
		opacity:0;
	}
}

@-moz-keyframes rect-3-animation {
	0% {
		top:-75px;
		-moz-opacity:0;
		opacity:0;
	}
	50% {
		top:50px;
		-moz-opacity:1;
		opacity:1;
	}
	100% {
		top: 100px;
		-moz-opacity:0;
		opacity:0;
	}
}

@-moz-keyframes rect-4-animation {
	0% {
		top:25px;
		-moz-opacity:0;
		opacity:0;
	}
	50% {
		top:100px;
		-moz-opacity:1;
		opacity:1;
	}
	100% {
		top: 150px;
		-moz-opacity:0;
		opacity:0;
	}
}


@-o-keyframes rect-1-animation {
	0% {
		top:-50px;
		-o-opacity:0
	}
	50% {
		top:50px;
		-o-opacity:1
	}
	100% {
		top  : 100px;
		-o-opacity:0
	}
}

@-o-keyframes rect-2-animation {
	0% {

		top:-20px;
		-o-opacity:0
	}
	50% {

		top:50px;
		-o-opacity:1
	}
	100% {

		top: 100px;
		-o-opacity:0
	}
}

@-o-keyframes rect-3-animation {
	0% {
		top:-75px;
		-o-opacity:0
	}
	50% {
		top:50px;
		-o-opacity:1
	}
	100% {
		top: 100px;
		-o-opacity:0
	}
}

@-o-keyframes rect-4-animation {
	0% {
		top:25px;
		-o-opacity:0
	}
	50% {
		top:100px;
		-o-opacity:1
	}
	100% {
		top: 150px;
		-o-opacity:0
	}
}