纯css环形进度条 + js模拟加载进度

最新推荐文章于 2024-05-31 10:29:13 发布

qq_24863989

最新推荐文章于 2024-05-31 10:29:13 发布

阅读量208

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/qq_24863989/article/details/124102641

版权

这篇博客介绍了如何使用CSS创建一个圆形旋转效果，并在其中显示动态变化的百分比。通过定义`.lf-box`和`.rt-box`的动画，实现了两侧半圆的连续翻转，同时`.word`类用于展示百分比数值，利用JavaScript进行实时更新。

摘要由CSDN通过智能技术生成

CSS

  .circle {
            width: 160px;
            height: 160px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto auto;
            border-radius: 50%;
            background: red;
        }

        .circle .word {
            width: 146px;
            height: 146px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto auto;
            background: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 146px;
            z-index: 1;
        }

        .lf-box,
        .rt-box {
            width: 50%;
            height: 160px;
            float: left;
            position: relative;
            overflow: hidden;
        }

        .lf-box div {
            border-radius: 80px 0 0 80px;
            background: #ccc;
            width: 100%;
            height: 160px;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: right center;
            animation: rotateL 10s linear infinite;
            animation-delay: 5s;

        }

        .rt-box div {
            border-radius: 0 80px 80px 0;
            background: #ccc;
            width: 100%;
            height: 160px;
            position: absolute;
            top: 0;
            right: 0;
            transform-origin: left center;
            animation: rotateR 10s linear infinite;
        }

        @keyframes rotateL {

            0%,
            51%,
            100% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(180deg);
            }
        }

        @keyframes rotateR {

            0% {
                transform: rotate(0deg);
            }

            50%,
            100% {
                transform: rotate(180deg);
            }
        }

Html

 <div class="circle">
   <div class="word"><span>0</span>%</div>
      <div class="lf-box">
         <div></div>
      </div>
      <div class="rt-box">
         <div></div>
      </div>
 </div>

Js

   let num = 0;
    setInterval(() => {
        num++;
        if (num > 100) {
            num = 0
        }
        document.getElementsByClassName('word')[0].getElementsByTagName('span')[0].innerHTML = num;
    }, 100)