使用css3制作一个简易的环形进度条

css：

  section {
            width: 2rem;
            height: 2rem;
            position: relative;
            margin: 2rem;
        }

        .wrap,
        .circle,
        .percent {
            position: absolute;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
        }

        .wrap {
            top: 0;
            left: 0;
            background: #ccc;

        }

        .circle {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -o-box-sizing: border-box;
            border: 1px solid #ccc;
            clip: rect(0, 2rem, 2rem, 1rem);
            /* 把圆剪切为只有右边的灰色半圆 */
        }

        .clip-auto {
            clip: rect(auto, auto, auto, auto);
        }

        .percent {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -o-box-sizing: border-box;
            top: -1px;
            left: -1px;
        }

        .left {
            border: 0.1rem solid #ff6300;
            clip: rect(0, 1rem, 2rem, 0);
            /* 把圆剪切为只有左边的橙色半圆，因为left圆是circle圆的子圆，
            所以circle圆剪切为只有右边的半圆时，left圆无法显示 */
        }

        .right {
            border: 0.1rem solid #FF6300;
            clip: rect(0, 2rem, 2rem, 1rem);
            /* 把圆剪切为只有右边的橙色半圆 */
        }

        .wth0 {
            width: 0;
        }

        .num {
            position: absolute;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -o-box-sizing: border-box;
            width: 1.8rem;
            height: 1.8rem;
            line-height: 1.8rem;
            text-align: center;
            font-size: 0.5rem;
            left: 0.1rem;
            top: 0.1rem;
            border-radius: 50%;
            color: #FF6300;
            background: white;
            z-index: 1;
            }

html:

<!--进度0%-->
    <section>
        <div class="wrap">
            <!--大于180，则class=clip-auto circle，否则：circle-->
            <div class="circle">
                <!--度数为：当前进度*3.6-->
                <div class="percent left" style= "-webkit-transform:rotate(0deg);"></div>
                <!--大于180，则class=percent right，否则为percent right wth0-->
                <div class='percent right wth0'></div>
            </div>
            <div class="num">
                <span>0</span>%
            </div>
        </div>
    </section>

    <!--进度30%-->
    <section>
        <div class="wrap">
            <!--大于180，则class=clip-auto circle，否则：circle-->
            <div class="circle">
                <!--度数为：当前进度*3.6-->
                <div class="percent left" style="-webkit-transform:rotate(108deg);"></div>
                <!--大于180，则class=percent right，否则为percent right wth0-->
                <div class='percent right wth0'></div>
            </div>
            <div class="num">
                <span>30</span>%
            </div>
        </div>
    </section>

    <!--进度50%-->
    <section>
        <div class="wrap">
            <!--大于180，则class=clip-auto circle，否则：circle-->
            <div class="clip-auto circle">
                <!--度数为：当前进度*3.6-->
                <div class="percent left" style="-webkit-transform:rotate(180deg);"></div>
                <!--大于180，则class=percent right，否则为percent right wth0-->
                <div class='percent right'></div>
            </div>
            <div class="num">
                <span>50</span>%
            </div>
        </div>
    </section>

    <!--进度70%-->
    <section>
        <div class="wrap">
            <!--大于180，则class=clip-auto circle，否则：circle-->
            <div class="clip-auto circle">
                <!--度数为：当前进度*3.6-->
                <div class="percent left" style="-webkit-transform:rotate(252deg);"></div>
                <!--大于180，则class=percent right，否则为percent right wth0-->
                <div class='percent right'></div>
            </div>
            <div class="num">
                <span>70</span>%
            </div>
        </div>
    </section>

    <!--进度100%-->
    <section>
        <div class="wrap">
            <!--大于180，则class=clip-auto circle，否则：circle-->
            <div class="clip-auto circle">
                <!--度数为：当前进度*3.6-->
                <div class="percent left" style="-webkit-transform:rotate(360deg);"></div>
                <!--大于180，则class=percent right，否则为percent right wth0-->
                <div class='percent right'></div>
            </div>
            <div class="num">
                <span>100</span>%
            </div>
        </div>
    </section>

javaScript:

 // 自动设置font-zise
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = parseInt(20 * (clientWidth / 320)) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

结果是：

版权声明：本文为CSDN博主「帆酱」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41187842/article/details/80525157