博客

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);
            }
        }