NO.1
<div class="loding">
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
.loding{
position: fixed
;
top: 0
;
bottom: 0
;
left: 0
;
right: 0
;
background: #FFFFFF
;
z-index: 999
;
display: flex
;
align-items: center
;
justify-content: center
;
}
#preloader_1{
position:relative
;
}
#preloader_1 span{
display:block
;
bottom:0px
;
width: 9px
;
height: 5px
;
background:#9b59b6
;
position:absolute
;
animation: preloader_1 1.5s infinite ease-in-out
;
}
#preloader_1 span:nth-child(2){
left:11px
;
animation-delay: .2s
;
}
#preloader_1 span:nth-child(3){
left:22px
;
animation-delay: .4s
;
}
#preloader_1 span:nth-child(4){
left:33px
;
animation-delay: .6s
;
}
#preloader_1 span:nth-child(5){
left:44px
;
animation-delay: .8s
;
}
@keyframes preloader_1 {
0% {height:5px
;transform:translateY(0px
);background:#FE6280
;}
25% {height:30px
;transform:translateY(15px
);background:#F42B85
;}
50% {height:5px
;transform:translateY(0px
);background:#F42B85
;}
100% {height:5px
;transform:translateY(0px
);background:#FE6280
;}
}
NO.2
<div class="NZ-loading-container loading-inline">
<div class="NZ-loading-item NZ-loading-cricel-1"></div>
<div class="NZ-loading-item NZ-loading-cricel-2"></div>
<div class="NZ-loading-item NZ-loading-cricel-3"></div>
<div class="NZ-loading-item NZ-loading-cricel-4"></div>
<div class="NZ-loading-item NZ-loading-cricel-5"></div>
<div class="NZ-loading-item NZ-loading-cricel-6"></div>
<div class="NZ-loading-item NZ-loading-cricel-7"></div>
<div class="NZ-loading-item NZ-loading-cricel-8"></div>
</div>
.NZ-loading-container {
position: relative
;
z-index: 2000
;
overflow: hidden
;
width: 200px
;
height: 60px
;
margin: 0 auto
;
margin-top: 100px
}
.NZ-loading-item {
position: absolute
;
bottom: 0
;
left: 0
;
z-index: 1000
;
display: inline-block
;
height: 10px
;
width: 10px
;
border-radius: 100%
;
background-color: #4b9cdb
;
opacity: 0
}
.NZ-loading-cricel-1 {
animation: NZ-motion-Loading 4s infinite
;
animation-delay: .8s
}
.NZ-loading-cricel-2 {
animation: NZ-motion-Loading 4s infinite
;
transform: translateX(20px
);
animation-delay: .7s
}
.NZ-loading-cricel-3 {
animation: NZ-motion-Loading 4s infinite
;
transform: translateX(40px
);
animation-delay: .6s
}
.NZ-loading-cricel-4 {
animation: NZ-motion-Loading 4s infinite
;
transform: translateX(60px
);
animation-delay: .5s
}
.NZ-loading-cricel-5 {
animation: NZ-motion-Loading 4s infinite
;
transform: translateX(80px
);
animation-delay: .4s
}
.NZ-loading-cricel-6 {
animation: NZ-motion-Loading 4s infinite
;
transform: translateX(100px
);
animation-delay: .3s
}
.NZ-loading-cricel-7 {
animation: NZ-motion-Loading 4s infinite
;
transform: translateX(120px
);
animation-delay: .2s
}
.NZ-loading-cricel-8 {
animation: NZ-motion-Loading 4s infinite
;
transform: translateX(140px
);
animation-delay: .1s
}
.loading-inline {
position: absolute
}
.NZ-loadingbg.white.motion {
animation-duration: 1s
;
animation-direction: normal
;
animation-iteration-count: 1
;
animation-fill-mode: forwards
}
@keyframes NZ-motion-Loading {
40% {left: 45%
;opacity: .8
}
100% {left: 100%
;opacity: 0
}
}
.NZ-loadingbg.black.motion-show {
animation-name: NZ-loading--white-bgshow
}
@keyframes NZ-loading-motion-bg-black {
0% {opacity: 0
}
100% {opacity: .3
}
}
@-webkit-keyframes NZ-loading-motion-bg-black {
0% {opacity: 0
}
100% {opacity: .3
}
}
.NZ-loadingbg.white.motion-show {
animation-name: NZ-loading--white-bgshow
}
@keyframes NZ-loading--white-bgshow {
0% {background-image: -webkit-linear-gradient(bottom,
rgba(255, 255, 255, 0
) 0,
rgba(255, 255, 255, 0
) 100%
);transform: translateY(100px
);opacity: 0
}
100% {background-image: -webkit-linear-gradient(bottom,
rgba(255, 255, 255, 1
) 0,
rgba(255, 255, 255, 0
) 100%
);transform: translateY(0px
);opacity: 1
}
}
@-webkit-keyframes NZ-loading--white-bgshow {
0% {background-image: -webkit-linear-gradient(bottom,
rgba(255, 255, 255, 0
) 0,
rgba(255, 255, 255, 0
) 100%
);-webkit-transform: translateY(100px
);opacity: 0
}
100% {background-image: -webkit-linear-gradient(bottom,
rgba(255, 255, 255, 1
) 0,
rgba(255, 255, 255, 0
) 100%
);-webkit-transform: translateY(0px
);opacity: 1
}
}
.NZ-loadingbg.white.motion-hide {
animation-name: NZ-loading--white-bghide
}
@keyframes NZ-loading--white-bghide {
0% {background-image: -webkit-linear-gradient(bottom,
rgba(255, 255, 255, 1
) 0,
rgba(255, 255, 255, 0
) 100%
);transform: translateY(0px
);opacity: 1
}
100% {background-image: -webkit-linear-gradient(bottom,
rgba(255, 255, 255, 0
) 0,
rgba(255, 255, 255, 0
) 100%
);transform: translateY(100px
);opacity: 0
}
}
@-webkit-keyframes NZ-loading--white-bghide {
0% {background-image: -webkit-linear-gradient(bottom,
rgba(255, 255, 255, 1
) 0,
rgba(255, 255, 255, 0
) 100%
);-webkit-transform: translateY(0px
);opacity: 1
}
100% {background-image: -webkit-linear-gradient(bottom,
rgba(255, 255, 255, 0
) 0,
rgba(255, 255, 255, 0
) 100%
);-webkit-transform: translateY(100px
);opacity: 0
}
}
