前端用css3使用:before和:after伪类元素实现loading效果,旋转的圆动画

css3部分

<style>
/*旋转loading*/

  b:not(:required) {
    border-right-color: transparent;
    border-radius: 1.7rem;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 3.4rem;
    height: 3.4rem;
  }

  b:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: 2px #fd9957 solid;
    clip: rect(0, 40px, 160px, 0);
    animation: loading 1.1s infinite linear;
  }

  @keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  /*  b:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 3.2rem;*/
/*    height: 3.2rem;*/
/*    border-radius: 3.2rem;*/
/*    border: 10px #469CEE solid;*/
/*    clip: rect(0, 42px, 15px, 0px);*/
/*    animation: loading-data-v-8caecbb2 1.1s infinite linear;*/
/*}*/
</style>

html部分

<template>
	<b></b>
</template>

说明:clip: rect (top, right, bottom, left),对图片裁剪,点击获取具体详细说明W3Chool