圆环百分比，圆环等待中（css3）

最新推荐文章于 2024-05-29 09:52:24 发布

原创最新推荐文章于 2024-05-29 09:52:24 发布 · 577 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

2 篇文章

订阅专栏

本文展示了如何使用CSS创建带有百分比显示的圆环效果和动画进度条。通过调整div元素的样式，实现了圆环的左右两部分以展示不同百分比，并通过JavaScript动态设置角度实现百分比变化。同时，还提供了一个圆形进度条的动画效果，利用border属性和关键帧动画来实现旋转。这些技巧在前端开发中常用于制作仪表盘或者加载指示器。

1、圆环百分比
在这里插入图片描述

    <div class="div3">
        <div class="circle">
            <div class="pie-left">
                <div class="left"></div>
            </div>
            <div class="pie-right">
                <div class="right"></div>
            </div>
            <div class="mask"><span></span></div>
        </div>
        <div class="num"><span></span>%</div>
    </div>

        .div3 {
            position: relative;
            display: flex;
            align-items: center;
            min-width: 60px;
            justify-content: flex-start;
            height: 24px;
            width: 22.5%;
        }
        .circle {
            width:24px;
            height: 24px;
            position: absolute;
            border-radius: 50%;
            background: #3F66FF;
            top: 0;
        }
        .num {
            padding-left: 35px;
        }
        .pie-left, 	.pie-right {
            width: 24px;
            height: 24px;
            position: absolute;
            left:0px;
            right: 0px;
        }
        .left, .right {
            display: block;
            width: 24px;
            height: 24px;
            background: #F0F2F5;
            border-radius: 50%;
            position: absolute;
            left:0px;
            top:0px;
            /*旋转30度*/
            /*transform: rotate(30deg);*/
        }
        .pie-right, .right {
            clip:rect(0,auto,auto,12px);
        }
        .pie-left, .left {
            /*截图工具 top rigt,bottom, left*/
            clip:rect(0,12px,auto,0);
        }

        .mask {
            width:16px;
            height: 16px;
            border-radius: 50%;
            position: absolute;
            left: 4px;
            top:4px;
            background: #fff;
        }

        var percent = 40
        var filePercent = Math.ceil(percent)
        var num = Math.ceil(percent)*3.6
        var str = ''
        $('.num span').text(percent)
        if(num < 180) {
            $('.right').css('transform', 'rotate(' + num + 'deg)')
        }else {
            $('.left').css('transform', 'rotate(' + (num - 180) + 'deg)')
            $('.right').css('transform', 'rotate(180deg)')
        }

2、圆环等待

<div class="progress-bar"></div>

        .progress-bar {
            width: 20px;
            height: 20px;
            border: 4px solid #3F66FF;
            border-left-color: #F0F2F5;
            border-right-color: #F0F2F5;
            border-top-color: #F0F2F5;
            margin: 12px;
            border-radius: 50%;
            animation: circle 2s infinite linear;
        }

        @keyframes circle {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(-360deg);
            }
        }