.kata-loader-wrapper {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
} .kata-ball-chasing .kata-loader {
width: 100px;
height: 100px;
animation: kataRotate 2s linear infinite;
}
.kata-ball-chasing .kata-loader .kata-ball-1,
.kata-ball-chasing .kata-loader .kata-ball-2 {
position: absolute;
top: 0;
width: 60%;
height: 60%;
border-radius: 50%;
background-color: #fff;
animation: kataChasingBallBounce 2s linear infinite;
}
.kata-ball-chasing .kata-loader .kata-ball-2 {
top: auto;
bottom: 0;
animation-delay: -1s;
}
@keyframes kataChasingBallBounce {
50% {
transform: scale(0);
}
} .kata-ball-pulse {
top: calc(50% - 60px);
left: calc(50% - 60px);
}
.kata-ball-pulse .kata-loader {
width: 120px;
height: 120px;
}
.kata-ball-pulse .kata-ball {
margin: 25% 0 0 25%;
width: 50%;
height: 50%;
background-color: #FFF;
border-radius: 50%;
animation: ballPulse 2s ease-in-out infinite;
}
@keyframes ballPulse {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 0;
}
} .kata-ball-pulse-double {
top: calc(50% - 60px);
left: calc(50% - 60px);
}
.kata-ball-pulse-double .kata-loader {
width: 120px;
height: 120px;
}
.kata-ball-pulse-double .kata-ball-1,
.kata-ball-pulse-double .kata-ball-2 {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: #FFF;
border-radius: 50%;
animation: ballPulseDouble 2s ease-in-out infinite;
opacity: .5;
}
.kata-ball-pulse-double .kata-ball-2 {
animation-delay: -1s;
}
@keyframes ballPulseDouble {
0%,
100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
} .kata-wave {
top: calc(50% - 75px);
left: calc(50% - 75px);
}
.kata-wave .kata-loader {
width: 150px;
height: 150px;
}
.kata-wave .kata-loader>div {
float: left;
margin: 40% 2% 0 0;
width: 4%;
height: 16%;
background-color: #FFF;
animation: kataWave 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) infinite;
}
.kata-wave .kata-loader .kata-line-1 {
margin-left: 30%;
}
.kata-wave .kata-loader .kata-line-1 {
animation-delay: 0.1s;
}
.kata-wave .kata-loader .kata-line-2 {
animation-delay: 0.2s;
}
.kata-wave .kata-loader .kata-line-3 {
animation-delay: 0.3s;
}
.kata-wave .kata-loader .kata-line-4 {
animation-delay: 0.4s;
}
.kata-wave .kata-loader .kata-line-5 {
animation-delay: 0.5s;
} .kata-wave-spread {
top: calc(50% - 75px);
left: calc(50% - 75px);
}
.kata-wave-spread .kata-loader {
width: 150px;
height: 150px;
}
.kata-wave-spread .kata-loader>div {
float: left;
margin: 40% 2% 0 0;
width: 4%;
height: 16%;
background-color: #FFF;
animation: kataWave 1s cubic-bezier(0.85, 0.25, 0.37, 0.85) infinite;
}
.kata-wave-spread .kata-loader .kata-line-1 {
margin-left: 30%;
}
.kata-wave-spread .kata-loader .kata-line-1,
.kata-wave-spread .kata-loader .kata-line-5 {
animation-delay: .4s;
}
.kata-wave-spread .kata-loader .kata-line-2,
.kata-wave-spread .kata-loader .kata-line-4 {
animation-delay: .2s;
}
@keyframes kataWave {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(2);
}
} .kata-circle-pulse {
top: calc(50% - 60px);
left: calc(50% - 60px);
}
.kata-circle-pulse .kata-loader {
width: 120px;
height: 120px;
}
.kata-circle-pulse .kata-loader>div {
margin: 23px 0 0 23px;
width: 50%;
height: 50%;
border: 2px solid #FFF;
border-radius: 50%;
animation: kataCirclePulse 1s ease infinite;
} .kata-circle-pulse-multiple {
top: calc(50% - 60px);
left: calc(50% - 60px);
}
.kata-circle-pulse-multiple .kata-loader {
width: 120px;
height: 120px;
}
.kata-circle-pulse-multiple .kata-loader>div {
position: absolute;
top: 24px;
left: 24px;
width: 50%;
height: 50%;
border: 2px solid #FFF;
border-radius: 50%;
animation: kataCirclePulse 1s ease infinite;
}
.kata-circle-pulse-multiple .kata-loader .kata-circle-2 {
animation-delay: -.9s;
}
.kata-circle-pulse-multiple .kata-loader .kata-circle-3 {
animation-delay: -.8s;
}
@keyframes kataCirclePulse {
0% {
transform: scale(0.1);
}
80% {
opacity: .8;
}
100% {
transform: scale(1);
opacity: 0;
}
} .kata-arc-rotate-double .kata-loader {
width: 100px;
height: 100px;
}
.kata-arc-rotate-double .kata-loader>div {
position: absolute;
border: 2px solid;
border-color: transparent #FFF;
border-radius: 50%;
animation: kataLoad 1s infinite ease-in-out;
}
.kata-arc-rotate-double .kata-loader .kata-arc-1 {
margin: 32% 0 0 32%;
width: 36%;
height: 36%;
}
.kata-arc-rotate-double .kata-loader .kata-arc-2 {
margin: 40% 0 0 40%;
width: 20%;
height: 20%;
animation-direction: reverse;
animation-delay: -0.5s;
}
@keyframes kataLoad {
0% {
transform: rotate(0) scale(1);
}
50% {
transform: rotate(180deg) scale(0.6);
}
100% {
transform: rotate(360deg) scale(1);
}
} .kata-square-split {
top: calc(50% - 75px);
left: calc(50% - 75px);
}
.kata-square-split .kata-loader {
width: 150px;
height: 150px;
}
.kata-square-split .kata-loader>div {
float: left;
width: 50%;
height: 50%;
}
.kata-square-split .kata-loader>div::after {
content: '';
display: block;
margin: 50% 0 0 50%;
width: 50%;
height: 50%;
background: #FFF;
animation: kataSquareSplit 2s infinite ease-in-out alternate;
}
.kata-square-split .kata-loader .kata-square-2 {
transform: rotate(90deg);
}
.kata-square-split .kata-loader .kata-square-3 {
transform: rotate(270deg);
animation-direction: reverse;
}
.kata-square-split .kata-loader .kata-square-4 {
transform: rotate(180deg);
animation-direction: reverse;
}
@keyframes kataSquareSplit {
20% {
transform: rotate(0deg);
margin: 50% 0 0 50%;
}
50% {
transform: rotate(90deg);
margin: 0px;
}
80% {
transform: rotate(180deg);
margin: 50% 0 0 50%;
}
100% {
transform: rotate(180deg);
margin: 50% 0 0 50%;
}
} .kata-arc-rotate {
top: calc(50% - 75px);
left: calc(50% - 75px);
}
.kata-arc-rotate .kata-loader {
width: 150px;
height: 150px;
}
.kata-arc-rotate .kata-loader .kata-arc {
position: absolute;
border: 2px solid;
border-color: transparent #FFF #FFF #FFF;
border-radius: 50%;
margin: 32% 0 0 32%;
width: 36%;
height: 36%;
animation: kataSingleArcRotate 1s infinite linear;
}
@keyframes kataSingleArcRotate {
100% {
transform: rotate(360deg);
}
} .kata-arc-rotate2 {
top: calc(50% - 75px);
left: calc(50% - 75px);
}
.kata-arc-rotate2 .kata-loader {
width: 150px;
height: 150px;
}
.kata-arc-rotate2 .kata-loader .kata-arc {
position: absolute;
width: 100%;
height: 100%;
}
.kata-arc-rotate2 .kata-loader .kata-arc::before,
.kata-arc-rotate2 .kata-loader .kata-arc::after {
content: '';
position: absolute;
top: 32%;
left: 32%;
border: 2px solid;
border-radius: 50%;
width: 36%;
height: 36%;
}
.kata-arc-rotate2 .kata-loader .kata-arc::before {
border-color: #FFF;
opacity: .3;
}
.kata-arc-rotate2 .kata-loader .kata-arc::after {
border-color: transparent;
border-bottom-color: #FFF;
animation: kataRotate 1s infinite linear;
} .kata-arc-scale .kata-loader {
width: 100px;
height: 100px;
}
.kata-arc-scale .kata-loader .kata-arc {
position: relative;
margin: 25% 0 0 25%;
width: 50%;
height: 50%;
border: 4px solid #FFF;
border-radius: 50%;
animation: kataRotate 2.9s infinite linear;
}
.kata-arc-scale .kata-loader .kata-arc::before,
.kata-arc-scale .kata-loader .kata-arc::after {
content: '';
position: absolute;
top: -5px;
width: 33px;
height: 62px;
background-color: #403cf2;
animation: kataRotate 2s infinite ease;
}
.kata-arc-scale .kata-loader .kata-arc::before {
left: -6px;
transform-origin: 29px 29px;
}
.kata-arc-scale .kata-loader .kata-arc::after {
left: 27px;
transform-origin: 0 29px;
animation-delay: 0.5s;
} .kata-clock .kata-loader {
width: 100px;
height: 100px;
}
.kata-clock .kata-loader .kata-arc {
position: relative;
margin: 23% 0 0 23%;
border: 2px solid #FFF;
width: 50px;
height: 50px;
border-radius: 50%;
}
.kata-clock .kata-loader .kata-arc::after,
.kata-clock .kata-loader .kata-arc::before {
content: '';
position: absolute;
top: 4%;
left: 48%;
width: 4%;
height: 46%;
background-color: #FFF;
transform-origin: 50% 100%;
border-radius: 5px;
animation: kataRotate 2s infinite linear;
}
.kata-clock .kata-loader .kata-arc::after {
height: 36%;
top: 14%;
animation-duration: 12s;
}
@keyframes kataRotate {
100% {
transform: rotate(360deg);
}
} .kata-square-rotate-3d .kata-loader {
width: 100px;
height: 100px;
}
.kata-square-rotate-3d .kata-loader .kata-square {
margin-top: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
background-color: #FFF;
animation: kataSquareRotate3d 2s infinite ease-in-out;
}
@keyframes kataSquareRotate3d {
25% {
transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50% {
transform: perspective(100px) rotateX(180deg) rotateY(-180deg);
}
75% {
transform: perspective(100px) rotateX(0) rotateY(-180deg);
}
100% {
transform: perspective(100px) rotateX(0) rotateY(0);
}
} .kata-spinner {
width: 90px;
height: 90px;
top: calc(50% - 40px);
left: calc(50% - 40px);
background: transparent;
border-top: 4px solid #ffffff;
border-right: 4px solid transparent;
border-radius: 50%;
animation: 1s kataSpin linear infinite;
}
@keyframes kataSpin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
} .kata-whirlpool .kata-ring:before {
content: '';
border-radius: 50%;
border: 1px solid #ffffff;
height: 30px;
width: 100px;
position: absolute;
}
.kata-whirlpool .kata-ring1:before {
left: 40px;
width: 20px;
top: 12px;
height: 6px;
animation: 2.5s ease 0s infinite kataSpinner;
}
.kata-whirlpool .kata-ring2:before {
left: 35px;
width: 30px;
top: 10.5px;
height: 9px;
animation: 2.5s ease 0.1s infinite kataSpinner;
}
.kata-whirlpool .kata-ring3:before {
left: 30px;
width: 40px;
top: 9px;
height: 12px;
animation: 2.5s ease 0.2s infinite kataSpinner;
}
.kata-whirlpool .kata-ring4:before {
left: 25px;
width: 50px;
top: 7.5px;
height: 15px;
animation: 2.5s ease 0.3s infinite kataSpinner;
}
.kata-whirlpool .kata-ring5:before {
left: 20px;
width: 60px;
top: 6px;
height: 18px;
animation: 2.5s ease 0.4s infinite kataSpinner;
}
.kata-whirlpool .kata-ring6:before {
left: 15px;
width: 70px;
top: 4.5px;
height: 21px;
animation: 2.5s ease 0.5s infinite kataSpinner;
}
.kata-whirlpool .kata-ring7:before {
left: 10px;
width: 80px;
top: 3px;
height: 24px;
animation: 2.5s ease 0.6s infinite kataSpinner;
}
.kata-whirlpool .kata-ring8:before {
left: 5px;
width: 90px;
top: 1.5px;
height: 27px;
animation: 2.5s ease 0.7s infinite kataSpinner;
}
.kata-whirlpool .kata-ring9:before {
width: 100px;
height: 30px;
animation: 2.5s ease 0.8s infinite kataSpinner;
}
@keyframes kataSpinner {
0% {
transform: translateY(10px);
animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
50% {
transform: translateY(60px);
animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
100% {
transform: translateY(10px);
animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
} .kata-drawing .kata-loading-dot {
border-radius: 100%;
height: 10px;
width: 10px;
background-color: #ffffff;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
box-shadow: 0px 40px 0px 0px #ffffff, 0px -40px 0px 0px #ffffff, 40px 0px 0px 0px #ffffff, -40px 0px 0px 0px #ffffff,
40px 40px 0px 0px #ffffff, -40px -40px 0px 0px #ffffff, 40px -40px 0px 0px #ffffff, -40px 40px 0px 0px #ffffff;
animation: kataDrawing 3s infinite linear;
}
@keyframes kataDrawing {
0% {
transform: translate(0px, 0px), rotate(0deg);
box-shadow: 0px 40px 0px 0px #ffffff, 0px -40px 0px 0px #ffffff, 40px 0px 0px 0px #ffffff, -40px 0px 0px 0px #ffffff,
40px 40px 0px 0px #ffffff, -40px -40px 0px 0px #ffffff, 40px -40px 0px 0px #ffffff, -40px 40px 0px 0px #ffffff;
}
25% {
box-shadow: 0px 40px 0px 0px #ffffff, 0px -40px 0px 0px #ffffff, 40px 0px 0px 0px #ffffff, -40px 0px 0px 0px #ffffff,
-40px -40px 0px 0px #ffffff, 40px 40px 0px 0px #ffffff, -40px 40px 0px 0px #ffffff, 40px -40px 0px 0px #ffffff;
}
50% {
box-shadow: 0px -40px 0px 0px #ffffff, 0px 40px 0px 0px #ffffff, -40px 0px 0px 0px #ffffff, 40px 0px 0px 0px #ffffff,
-40px -40px 0px 0px #ffffff, 40px 40px 0px 0px #ffffff, -40px 40px 0px 0px #ffffff, 40px -40px 0px 0px #ffffff;
}
70% {
box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff,
0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff;
}
75% {
box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff,
0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff;
height: 10px;
width: 10px;
}
80% {
transform: translate(0px, 0px) rotate(360deg);
box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff,
0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff;
background-color: #ffffff;
height: 40px;
width: 40px;
}
85% {
transform: translate(0px, 0px) rotate(360deg);
box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff,
0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff;
background-color: #ffffff;
height: 40px;
width: 40px;
}
90% {
transform: translate(0px, 0px) rotate(360deg);
box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff,
0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #ffffff;
background-color: #ffffff;
height: 10px;
width: 10px;
}
95% {
box-shadow: 0px 40px 0px 0px #ffffff, 0px -40px 0px 0px #ffffff, 40px 0px 0px 0px #ffffff, -40px 0px 0px 0px #ffffff,
40px 40px 0px 0px #ffffff, -40px -40px 0px 0px #ffffff, 40px -40px 0px 0px #ffffff, -40px 40px 0px 0px #ffffff;
}
100% {
transform: rotate(360deg);
box-shadow: 0px 40px 0px 0px #ffffff, 0px -40px 0px 0px #ffffff, 40px 0px 0px 0px #ffffff, -40px 0px 0px 0px #ffffff,
40px 40px 0px 0px #ffffff, -40px -40px 0px 0px #ffffff, 40px -40px 0px 0px #ffffff, -40px 40px 0px 0px #ffffff;
}
}