前端小loading

Posted 2021-02-28 ivan5277

.loading{
    display: inline-block;
    height: .24rem;
    width: .24rem;
    border-radius: 100%;
    border: 2px solid #666;
    border-bottom-color: transparent;
    position: absolute;
    left: 45%;
    top: 45%;
    transform: translate(-40%,-40%);
    -webkit-transform: translate(-50%,-50%);
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
  @-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
  }
  @keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
  }

<span class="loading"></span>