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