front/src/routes/signup-gateway/spinner.css
.sp {
width: 32px;
height: 32px;
clear: both;
margin-top: 72px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.spWave {
border-radius: 50%;
position: relative;
opacity: 1;
}
.spWave:before, .spWave:after {
content: '';
border: 1px #000 solid;
border-radius: 50%;
width: 100%;
height: 100%;
position: absolute;
left: 0px;
}
.spWave:before {
transform: scale(1, 1);
opacity: 1;
-webkit-animation: spWaveBe 0.6s infinite linear;
animation: spWaveBe 0.6s infinite linear;
}
.spWave:after {
transform: scale(0, 0);
opacity: 0;
-webkit-animation: spWaveAf 0.6s infinite linear;
animation: spWaveAf 0.6s infinite linear;
}
@-webkit-keyframes spWaveAf {
from {
-webkit-transform: scale(0.5, 0.5);
opacity: 0;
}
to {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
@keyframes spWaveAf {
from {
transform: scale(0.5, 0.5);
opacity: 0;
}
to {
transform: scale(1, 1);
opacity: 1;
}
}
@-webkit-keyframes spWaveBe {
from {
-webkit-transform: scale(1, 1);
opacity: 1;
}
to {
-webkit-transform: scale(1.5, 1.5);
opacity: 0;
}
}
@keyframes spWaveBe {
from {
-webkit-transform: scale(1, 1);
opacity: 1;
}
to {
-webkit-transform: scale(1.5, 1.5);
opacity: 0;
}
}
/**
*/
.circle-loader {
margin-top: 50px;
margin-bottom: 20px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-left-color: #5cb85c;
animation: loader-spin 1.2s infinite linear;
position: relative;
display: block;
border-radius: 50%;
/*width: 7em;*/
width: 5em;
height: 5em;
margin-left: auto;
margin-right: auto;
}
.load-complete {
-webkit-animation: none;
animation: none;
border-color: #5cb85c;
transition: border 500ms ease-out;
}
.checkmark {
display: block;
}
.checkmark.draw:after {
animation-duration: 900ms;
animation-timing-function: ease;
animation-name: checkmark;
transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
opacity: 1;
/*height: 3.5em;*/
height: 2.4em;
/*width: 1.75em;*/
width: 1.24em;
transform-origin: left top;
border-right: 3px solid #5cb85c;
border-top: 3px solid #5cb85c;
content: '';
left: 1.24em;
top: 2.4em;
position: absolute;
}
@keyframes loader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 1.24em;
opacity: 1;
}
40% {
height: 2.4em;
width: 1.24em;
opacity: 1;
}
100% {
height: 2.4em;
width: 1.24em;
opacity: 1;
}
}