效果图

思路

外面的边框以中心位画圆:transform-origin
边框展示成不同的角度：rotate
动态展示效果通过animation实现
80%的比例通过nth-child(-n+82)实现
代码

<!DOCTYPE html>
<html lang="zh-CN">
        <head>
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta http-equiv="Expires" content="0">
                <meta http-equiv="Pragma" content="no-cache">
                <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
                <meta http-equiv="Cache" content="no-cache">
                <meta name="referrer" content="no-referrer" />
                <style>
                        body {
                                min-height: 100vh;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                        }

                        .card {
                                width: 530px;
                                height: 530px;
                                background: #333;
                                display: flex;
                                flex-flow: column;
                                align-items: center;
                                justify-content: center;
                                color: #fff;
                                position: relative;
                        }

                        .num {
                                font-size: 50px;
                        }

                        .title {
                                font-size: 20px;
                        }

                        .split {
                                width: 10px;
                                height: 30px;
                                background: #fff;
                                position: absolute;
                                top: 0;
                                transform-origin: 50% 265px;
                                animation: pc 1s linear forwards;
                                opacity: 0;
                        }

                        .split:nth-child(-n+82) {
                                background: red;
                        }

                        @keyframes pc {

                                100% {
                                        opacity: 1;
                                }
                        }
                </style>
        </head>
        <body>
                <div class="card">
                        <span class="num">80%</span>
                        <span class="title">完成进度</span>

                </div>
                <script>
                        let $card = document.getElementsByClassName('card')[0];
                        let $htmlStr = '';
                        for (let i = 0; i < 100; i++) {
                                $htmlStr += '<div class="split" style="transform:rotate(' + 360 / 100 * i + 'deg);animation-delay: ' + i / 60 +
                                        's;"></div>'
                        }
                        $card.innerHTML += $htmlStr;
                </script>
        </body>
</html>
css3 速度表(圆形进度条)

效果图

思路

代码
