利用css完成圆形loading动画

最新推荐文章于 2023-11-04 11:41:09 发布

想吃手撕面包

最新推荐文章于 2023-11-04 11:41:09 发布

阅读量764

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_67519713/article/details/131060979

版权

今天用css完成一个仿微信小程序圆形loading动画
在这里插入图片描述

废话不多说直接直接上代码

html

  <div id="hidden" class="toast">
    <div class="circle">
      <div class="mask"></div>
    </div>
    <div class="text">正在加载</div>
  </div>

css

    .toast {
      width: 1.2rem;
      height: 1.2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgb(76, 76, 76);
      border-radius: 10px;
      display: none;
    }

    .circle {
      width: 35px;
      height: 35px;
      background: conic-gradient(transparent 10%, #e4e4e4 90%);
      border-radius: 50%;
      position: relative;
      margin: 0.2rem auto;
      animation: rotate 1s linear infinite;
    }

    .mask {
      width: 30px;
      height: 30px;
      background-color: rgb(76, 76, 76);
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
        /* 初始状态 */
      }

      100% {
        transform: rotate(360deg);
        /* 结束状态 */
      }
    }

    .text {
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #e4e4e4;
      
    }