app/assets/stylesheets/base/spinner.scss
.box-spinner {
box-shadow: 0px 1px 1px 0px rgba(0,0,0,.2);
background-image: none !important;
background-color: #fff;
z-index: 999999;
height: 100%;
}
.tw-spinner {
font-size: 20px;
overflow: hidden;
width: 100%;
position: relative;
svg {
display: block;
position: relative;
width: 30px;
height: 30px;
margin: 0px auto;
}
#Tail {
opacity: 0;
animation: tail 2s ease infinite;
fill:#41BA8D;
}
#LeftBottom {
fill:#00845D;
opacity: 0;
animation: spinner 1s ease alternate infinite;
animation-delay: 0s;
}
#LeftMid {
fill:#28221B;
opacity: 0;
animation: spinner 1s ease alternate infinite;
animation-delay: 0.2s;
}
#LeftTop {
fill:#342D25;
opacity: 0;
animation: spinner 1s ease alternate infinite;
animation-delay: 0.4s;
}
#Head {
fill:#342D25;
opacity: 0;
animation: spinner 1s ease alternate infinite;
animation-delay: 0.6s;
}
@keyframes spinner {
0% { opacity: 0; }
30% { opacity: 0; }
90% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes tail {
0% { opacity: 0; }
30% { opacity: 1; }
50% { opacity: 1; }
90% { opacity: 0; }
100% { opacity: 0; }
}
}
/*
.box-spinner {
box-shadow: 0px 1px 1px 0px rgba(0,0,0,.2);
background-image: none !important;
background-color: #fff;
z-index: 999999;
}
.spinner {
color: $color-secondary-2-4;
font-size: 20px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 72px auto;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease;
animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
*/