實現一個圓形進度條

時間 2019-12-14

標籤實現一個圓形進度简体版

原文原文鏈接

如今的一些數據運營活動h5頁面中，一般回涉及到圓形的進度條，好比京東白條，螞蟻芝麻分。最近作了一個相似的，固然前期想法是用canvas作，可是考慮到低端安卓手機的渲染能力，最終以純原生css+js實現，總結一下css

效果圖

思路

index0底層一個色值#c1a76b的圓，中間index1一個三角形，也就是底邊缺的效果，上層index2是白色全圓（帶陰影，600和信用極好包裹在裏面），另外左右50%各鋪一個index3，index4透明層，這個層overflow：hidden，兩個層裏面都有一個#f7f7f7的填充，經過旋轉這兩個填充物來實現圓形進度效果（先左邊旋轉180deg完，再旋轉右邊）html

動態圖

貼代碼

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: #f7f7f7;
            }
            .new-cricle {
                position: relative;
                width: 148px;
                height: 148px;
                border-radius: 50%;
                background-color: #c1a76b;
                margin: 0 auto;
                z-index: 0;
            }

            .new-cricle .cricle-text {
                position: absolute;
                top: 20px;
                width: 130px;
                left: 50%;
                margin-left: -65px;
                z-index: 5;
                text-align: center;
            }
            .new-cricle .cricle-text.p0 {
                top: 28px;
                font-size: 42px;
                color: #C09B5B;
                font-family: DINAlternate-Bold;
            }
            .new-cricle .cricle-text.txt2 {
                top: 85px;
                font-size: 16px;
                color: #C09B5B;
                font-family: PingFangSC-Medium;
            }

            .cricle-left-area {
                position: absolute;
                top: -1px;
                left: -1px;
                width: 75px;
                height: 150px;
                background-color: transparent;
                overflow: hidden;
            }
            .cricle-left {
                position: absolute;
                width: 75px;
                height: 150px;
                background-color: #f7f7f7;
                border-radius: 75px 0 0 75px;
                transform-origin: right center;
                z-index: 1;
                transition: 1.5s all;
                transform: rotate(35deg);
            }

            .cricle-right-area {
                position: absolute;
                top: -1px;
                right: -1px;
                width: 75px;
                height: 150px;
                background-color: transparent;
                overflow: hidden;
            }
            .cricle-right {
                position: absolute;
                width: 75px;
                height: 150px;
                background-color: #f7f7f7;
                border-radius: 0 75px 75px 0;
                transform-origin: left center;
                z-index: 2;
                transition: 1.5s all;
            }
            .triangle {
                width: 0;
                height: 0;
                border-width: 0 80px 80px;
                border-style: solid;
                border-color: transparent transparent #f7f7f7;/*透明 透明  白*/
                position: absolute;
                bottom: -10px;
                left: 50%;
                margin-left: -80px;
                z-index: 3;

            }
            .cricle-all {
                position: relative;
                width: 128px;
                height: 128px;
                border-radius: 50%;
                background-color: #fff;
                box-shadow: 0 2px 15px 0 #D8CEBB;
                margin: 0 auto;
                z-index: 4;
                top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="new-cricle">
            <div class="cricle-left-area">
                <div class="cricle-left" id="cricleLeft"></div>
            </div>

            <div class="cricle-right-area">
                <div class="cricle-right" id="cricleRight"></div>
            </div>

            <div class="triangle"></div>
            <div class="cricle-all"></div>

            <div class="cricle-text p0">600</div>
            <div class="cricle-text txt2">信用極好</div>
        </div>
    </body>

    <script>
        var $cricleLeft = document.getElementById('cricleLeft')
        var $cricleRight = document.getElementById('cricleRight')
        
        var angle = 360; //旋鈕角度

        setTimeout(function(){
            if(angle >= 180){
                $cricleLeft.style.transform = 'rotate(180deg)';
                setTimeout(function(){
                    $cricleRight.style.transform = 'rotate('+ (angle - 180) +'deg)';
                }, 1400)
            }else{
                $cricleLeft.style.transform = 'rotate(' + angle + 'deg)';
            }
        }, 1000)
        
        
    </script>
</html>