joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
62 lines (60 loc) • 1.28 kB
CSS
.horizontal-loader.dimission-loader {
width: 400px;
margin: 0 auto;
}
.horizontal-loader .spinner {
margin: 0 auto;
width: 150px;
text-align: center;
padding-top: 100px;
}
.horizontal-loader .spinner > div {
width: 10px;
height: 10px;
background-color: #d8d8d8;
margin-right: 6px;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.horizontal-loader .spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.horizontal-loader .spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes bouncedelay {
0%,
80%,
100% {
transform: scale(0);
-webkit-transform: scale(0);
}
40% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
.horizontal-loader .horizontal-loading-txt {
text-align: center;
font-size: 14px;
color: #b0b0b0;
margin-top: 26px;
font-weight: 300;
}