上下抖动三点加载

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;
  }
}