CSS环形进度条

最新推荐文章于 2024-06-02 15:09:49 发布

月亮很圆.

最新推荐文章于 2024-06-02 15:09:49 发布

阅读量304

点赞数 1

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/L_Y_J_21/article/details/138814867

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

	<div class="percent">
        <svg>
            <circle cx="70" cy="70" r="70" />
            <circle id="circle" cx="70" cy="70" r="70" />
        </svg>
        <div class="number">
            <h3>
                <span id="percent">20</span>
                <span>%</span>
            </h3>
        </div>
    </div>

    <script type="text/javascript">
        // 动态设置百分比
        const percentBox = document.querySelector("#percent")
        const circle = document.querySelector("#circle")
        let percent = 20
        //每隔1.5s进度条累加一个随机百分比
        const timer = setInterval(() => {
            percent += Math.ceil(Math.random() * 30)
            if (percent > 100) {
                percent = 100
                clearInterval(timer)
            }
            //设置样式
            percentBox.innerHTML = percent
            circle.style.strokeDashoffset = `calc(440 - 440 * (${percent} / 100))`
        }, 1500
        )
    </script>

	.percent {
        position: relative;
        width: 150px;
        height: 150px;
        svg {
            width: 150px;
            height: 150px;
            circle {
                fill: none;
                stroke-width: 10;
                transform: translate(5px, 5px);
                /*设置虚线长度=圆的周长（2*80*3.14）*/
                stroke-dasharray: 440;
                /* 设置偏移量 */
                stroke-dashoffset: 440;
                &:nth-child(1) {
                    stroke-dashoffset: 0;
                    stroke: #f3f3f3;
                }
                &:nth-child(2) {
                    /* 设置偏移量,显示百分比进度20% */
                    stroke-dashoffset: calc(440 - 440 * (20/100));
                    stroke: darkorchid;
                }
            }
        }
        .number {
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            color: #333;
            span {
                &:nth-child(1) {
                    font-size: 40px;
                }
                &:nth-child(2) {
                    font-size: 20px;
                }
            }
        }
    }