.epic-spinner-loading{
position: absolute;
top:0;
left: 0;
width: 100%;
height:100%;
z-index: 999999999999;
}
.epic-spinner-loading-inner{
position: absolute;
top:200px;
left: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.epic-spinner-loading.epic-center-screen{
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 100%;
background-color: rgba(255,255,255,0.95);
}
.epic-center-screen > .epic-spinner-loading-inner{
top:50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
} .atom-spinner, .atom-spinner * {
box-sizing: border-box;
}
.atom-spinner {
height: 60px;
width: 60px;
overflow: hidden;
}
.atom-spinner .spinner-inner {
position: relative;
display: block;
height: 100%;
width: 100%;
}
.atom-spinner .spinner-circle {
display: block;
position: absolute;
color: #343434;
font-size: calc(60px * 0.24);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.atom-spinner .spinner-line {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
animation-duration: 1s;
border-left-width: calc(60px / 25);
border-top-width: calc(60px / 25);
border-left-color: #343434;
border-left-style: solid;
border-top-style: solid;
border-top-color: transparent;
}
.atom-spinner .spinner-line:nth-child(1) {
animation: atom-spinner-animation-1 1s linear infinite;
transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
}
.atom-spinner .spinner-line:nth-child(2) {
animation: atom-spinner-animation-2 1s linear infinite;
transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
}
.atom-spinner .spinner-line:nth-child(3) {
animation: atom-spinner-animation-3 1s linear infinite;
transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
}
@keyframes atom-spinner-animation-1 {
100% {
transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
}
}
@keyframes atom-spinner-animation-2 {
100% {
transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
}
}
@keyframes atom-spinner-animation-3 {
100% {
transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
}
}
.fingerprint-spinner, .fingerprint-spinner * {
box-sizing: border-box;
}
.fingerprint-spinner {
height: 64px;
width: 64px;
padding: 2px;
overflow: hidden;
position: relative;
}
.fingerprint-spinner .spinner-ring {
position: absolute;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: #343434;
animation: fingerprint-spinner-animation 1500ms cubic-bezier(0.680, -0.750, 0.265, 1.750) infinite forwards;
margin: auto;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.fingerprint-spinner .spinner-ring:nth-child(1) {
height: calc(60px / 9 + 0 * 60px / 9);
width: calc(60px / 9 + 0 * 60px / 9);
animation-delay: calc(50ms * 1);
}
.fingerprint-spinner .spinner-ring:nth-child(2) {
height: calc(60px / 9 + 1 * 60px / 9);
width: calc(60px / 9 + 1 * 60px / 9);
animation-delay: calc(50ms * 2);
}
.fingerprint-spinner .spinner-ring:nth-child(3) {
height: calc(60px / 9 + 2 * 60px / 9);
width: calc(60px / 9 + 2 * 60px / 9);
animation-delay: calc(50ms * 3);
}
.fingerprint-spinner .spinner-ring:nth-child(4) {
height: calc(60px / 9 + 3 * 60px / 9);
width: calc(60px / 9 + 3 * 60px / 9);
animation-delay: calc(50ms * 4);
}
.fingerprint-spinner .spinner-ring:nth-child(5) {
height: calc(60px / 9 + 4 * 60px / 9);
width: calc(60px / 9 + 4 * 60px / 9);
animation-delay: calc(50ms * 5);
}
.fingerprint-spinner .spinner-ring:nth-child(6) {
height: calc(60px / 9 + 5 * 60px / 9);
width: calc(60px / 9 + 5 * 60px / 9);
animation-delay: calc(50ms * 6);
}
.fingerprint-spinner .spinner-ring:nth-child(7) {
height: calc(60px / 9 + 6 * 60px / 9);
width: calc(60px / 9 + 6 * 60px / 9);
animation-delay: calc(50ms * 7);
}
.fingerprint-spinner .spinner-ring:nth-child(8) {
height: calc(60px / 9 + 7 * 60px / 9);
width: calc(60px / 9 + 7 * 60px / 9);
animation-delay: calc(50ms * 8);
}
.fingerprint-spinner .spinner-ring:nth-child(9) {
height: calc(60px / 9 + 8 * 60px / 9);
width: calc(60px / 9 + 8 * 60px / 9);
animation-delay: calc(50ms * 9);
}
@keyframes fingerprint-spinner-animation {
100% {
transform: rotate( 360deg );
}
}
.flower-spinner,  .flower-spinner * {
box-sizing: border-box;
}
.flower-spinner {
height: 70px;
width: 70px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.flower-spinner .dots-container {
height: calc(70px / 7);
width: calc(70px / 7);
}
.flower-spinner .smaller-dot {
background: #343434;
height: 100%;
width: 100%;
border-radius: 50%;
animation: flower-spinner-smaller-dot-animation 2.5s 0s infinite both;
}
.flower-spinner .bigger-dot {
background: #343434;
height: 100%;
width: 100%;
padding: 10%;
border-radius: 50%;
animation: flower-spinner-bigger-dot-animation 2.5s 0s infinite both;
}
@keyframes flower-spinner-bigger-dot-animation {
0%, 100% {
box-shadow: rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px;
}
50% {
transform: rotate(180deg);
}
25%, 75% {
box-shadow: rgb(52, 52, 52) 26px 0px 0px,
rgb(52, 52, 52) -26px 0px 0px,
rgb(52, 52, 52) 0px 26px 0px,
rgb(52, 52, 52) 0px -26px 0px,
rgb(52, 52, 52) 19px -19px 0px,
rgb(52, 52, 52) 19px 19px 0px,
rgb(52, 52, 52) -19px -19px 0px,
rgb(52, 52, 52) -19px 19px 0px;
}
100% {
transform: rotate(360deg);
box-shadow: rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px;
}
}
@keyframes flower-spinner-smaller-dot-animation {
0%, 100% {
box-shadow: rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px;
}
25%, 75% {
box-shadow: rgb(52, 52, 52) 14px 0px 0px,
rgb(52, 52, 52) -14px 0px 0px,
rgb(52, 52, 52) 0px 14px 0px,
rgb(52, 52, 52) 0px -14px 0px,
rgb(52, 52, 52) 10px -10px 0px,
rgb(52, 52, 52) 10px 10px 0px,
rgb(52, 52, 52) -10px -10px 0px,
rgb(52, 52, 52) -10px 10px 0px;
}
100% {
box-shadow: rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px,
rgb(52, 52, 52) 0px 0px 0px;
}
}
.half-circle-spinner, .half-circle-spinner * {
box-sizing: border-box;
}
.half-circle-spinner {
width: 60px;
height: 60px;
border-radius: 100%;
position: relative;
}
.half-circle-spinner .circle {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
border: calc(60px / 10) solid transparent;
}
.half-circle-spinner .circle.circle-1 {
border-top-color: #343434;
animation: half-circle-spinner-animation 1s infinite;
}
.half-circle-spinner .circle.circle-2 {
border-bottom-color: #343434;
animation: half-circle-spinner-animation 1s infinite alternate;
}
@keyframes half-circle-spinner-animation {
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.orbit-spinner, .orbit-spinner * {
box-sizing: border-box;
}
.orbit-spinner {
height: 55px;
width: 55px;
border-radius: 50%;
perspective: 800px;
}
.orbit-spinner .orbit {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.orbit-spinner .orbit:nth-child(1) {
left: 0%;
top: 0%;
animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;
border-bottom: 3px solid #343434;
}
.orbit-spinner .orbit:nth-child(2) {
right: 0%;
top: 0%;
animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;
border-right: 3px solid #343434;
}
.orbit-spinner .orbit:nth-child(3) {
right: 0%;
bottom: 0%;
animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;
border-top: 3px solid #343434;
}
@keyframes orbit-spinner-orbit-one-animation {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes orbit-spinner-orbit-two-animation {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes orbit-spinner-orbit-three-animation {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
.self-building-square-spinner, .self-building-square-spinner * {
box-sizing: border-box;
}
.self-building-square-spinner {
height: 40px;
width: 40px;
top: calc( -10px * 2 / 3);
}
.self-building-square-spinner .square {
height: 10px;
width: 10px;
top: calc( -10px * 2 / 3);
margin-right: calc(10px / 3);
margin-top: calc(10px / 3);
background: #343434;
float: left;
position:relative;
opacity: 0;
animation: self-building-square-spinner 6s infinite;
}
.self-building-square-spinner .square:nth-child(1) {
animation-delay: calc(300ms * 6);
}
.self-building-square-spinner .square:nth-child(2) {
animation-delay: calc(300ms * 7);
}
.self-building-square-spinner .square:nth-child(3) {
animation-delay: calc(300ms * 8);
}
.self-building-square-spinner .square:nth-child(4) {
animation-delay: calc(300ms * 3);
}
.self-building-square-spinner .square:nth-child(5) {
animation-delay: calc(300ms * 4);
}
.self-building-square-spinner .square:nth-child(6) {
animation-delay: calc(300ms * 5);
}
.self-building-square-spinner .square:nth-child(7) {
animation-delay: calc(300ms * 0);
}
.self-building-square-spinner .square:nth-child(8) {
animation-delay: calc(300ms * 1);
}
.self-building-square-spinner .square:nth-child(9) {
animation-delay: calc(300ms * 2);
}
.self-building-square-spinner .clear{
clear: both;
}
@keyframes self-building-square-spinner {
0% {
opacity: 0;
}
5% {
opacity: 1;
top: 0;
}
50.9% {
opacity: 1;
top: 0;
}
55.9% {
opacity: 0;
top: inherit;
}
}
.hollow-dots-spinner, .hollow-dots-spinner * {
box-sizing: border-box;
}
.hollow-dots-spinner {
height: 15px;
width: calc(30px * 3);
}
.hollow-dots-spinner .dot {
width: 15px;
height: 15px;
margin: 0 calc(15px / 2);
border: calc(15px / 5) solid #343434;
background-color: #343434;
border-radius: 50%;
float: left;
transform: scale(0);
animation: hollow-dots-spinner-animation 1500ms ease infinite 0ms;
}
.hollow-dots-spinner .dot:nth-child(1) {
animation-delay: calc(300ms * 1);
}
.hollow-dots-spinner .dot:nth-child(2) {
animation-delay: calc(300ms * 2);
}
.hollow-dots-spinner .dot:nth-child(3) {
animation-delay: calc(300ms * 3);
}
@keyframes hollow-dots-spinner-animation {
50% {
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}