fantazer
6/7/2017 - 12:59 PM

preloader загрузка страницы

preloader загрузка страницы

.cssload-box-loading
	width: 49px
	height: 49px
	margin: auto
	position: absolute
	left: 0
	right: 0
	top: 0
	bottom: 0

.cssload-box-loading:before
	content: ''
	width: 49px
	height: 5px
	background: rgb(0,0,0)
	opacity: 0.1
	position: absolute
	top: 58px
	left: 0
	border-radius: 50%
	animation: shadow 0.58s linear infinite

.cssload-box-loading:after
	content: ''
	width: 49px
	height: 49px
	background: rgb(26,54,104)
	position: absolute
	top: 0
	left: 0
	border-radius: 3px
	animation: cssload-animate 0.58s linear infinite



@keyframes cssload-animate
	17%
		border-bottom-right-radius: 3px
	25%
		transform: translateY(9px) rotate(22.5deg)
	50%
		transform: translateY(18px) scale(1, 0.9) rotate(45deg)
		border-bottom-right-radius: 39px
	75%
		transform: translateY(9px) rotate(67.5deg)
	100%
		transform: translateY(0) rotate(90deg)

@keyframes cssload-animate
	17%
		border-bottom-right-radius: 3px
	25%
		transform: translateY(9px) rotate(22.5deg)
	50%
		transform: translateY(18px) scale(1, 0.9) rotate(45deg)
	75%
		transform: translateY(9px) rotate(67.5deg)
	100%
		transform: translateY(0) rotate(90deg)

@keyframes cssload-animate
	17%
		border-bottom-right-radius: 3px
	25%
		transform: translateY(9px) rotate(22.5deg)
	50%
		transform: translateY(18px) scale(1, 0.9) rotate(45deg)
		border-bottom-right-radius: 39px
	75%
		transform: translateY(9px) rotate(67.5deg)
	100%
		transform: translateY(0) rotate(90deg)

@keyframes cssload-animate
	17%
		border-bottom-right-radius: 3px
	25%
		transform: translateY(9px) rotate(22.5deg)
	50%
		transform: translateY(18px) scale(1, 0.9) rotate(45deg)
		border-bottom-right-radius: 39px
	75%
		transform: translateY(9px) rotate(67.5deg)
	100%
		transform: translateY(0) rotate(90deg)

@-moz-keyframes cssload-animate
	17%
		border-bottom-right-radius: 3px
	25%
		transform: translateY(9px) rotate(22.5deg)
	50%
		transform: translateY(18px) scale(1, 0.9) rotate(45deg)
	75%
		transform: translateY(9px) rotate(67.5deg)
	100%
		transform: translateY(0) rotate(90deg)

@keyframes shadow
	0%,
	100%
		transform: scale(1, 1)
	50%
		transform: scale(1.2, 1)

@keyframes shadow
	0%,
	100%
		transform: scale(1, 1)
	50%
		transform: scale(1.2, 1)

@keyframes shadow
	0%,
	100%
		transform: scale(1, 1)
	50%
		transform: scale(1.2, 1)

@keyframes shadow
	0%,
	100%
		transform: scale(1, 1)
	50%
		transform: scale(1.2, 1)

@-moz-keyframes shadow
	0%,
	100%
		-moz-transform: scale(1, 1)
	50%
		-moz-transform: scale(1.2, 1)

.preload-wrap
	background: white
	position: fixed
	top:0
	left:0
	width: 100%
	height: 100vh
	z-index 9999
	transition all 1s
	opacity 1
	visibility visible

.preload-wrap--hide
	opacity 0
	visibility hidden
setTimeout(function () {
		$('.preload-wrap').addClass('preload-wrap--hide');
},1500);
.preload-wrap
	.cssload-box-loading