import React from 'react';
import './Loading.less';
export interface ILoadingProps {}
type Props = ILoadingProps;
export function Loading(props: Readonly<Props>) {
return (
<div className="k-common-loading">
<div className="wrapper">
<span className="circle circle-1" />
<span className="circle circle-2" />
<span className="circle circle-3" />
</div>
</div>
);
}
export default Loading;
@import '../../../styles/mixins';
.k-common-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999999;
display: flex;
justify-content: center;
align-items: center;
.circle {
display: inline-block;
width: 8px;
max-width: 8px;
height: 8px;
margin-right: 4px;
background-color: #fcdc29;
border-radius: 50%;
animation: loading 1.5s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;
}
@keyframes loading {
0% {
transform: translateY(0px);
background-color: #fcdc29;
}
50% {
transform: translateY(10px);
background-color: #ef584a;
}
100% {
transform: translateY(0px);
background-color: #fcdc29;
}
}
.circle-1 {
animation-delay: 0.1s;
}
.circle-2 {
animation-delay: 0.2s;
}
.circle-3 {
animation-delay: 0.3s;
}
}