實現環形進度條的幾種方法

Scliang 發布于2019-08-30 15:52 / 2379人閱讀

摘要：環形進度條的問題，網上有很多的，也有各種不同的實現方式，很棒的實現也有很多，我這自己做一下一方面是想開闊一下自己的思路，一方面好久沒看和的東西了，基礎的拿來熟悉下。

環形進度條的問題，網上有很多的demo，也有各種不同的實現方式，很棒的實現也有很多，我這自己做一下一方面是想開闊一下自己的思路，一方面好久沒看SVG和Canvas的東西了，基礎的拿來熟悉下。

DIV + CSS3

這個是最基本的實現方式，我在想怎樣用盡量少的DOM結構來實現，最終還是用了三個div，不過這個方法僅供開闊思路，樣式表現在PC還好，手機上的問題就多了，僅供參考。

1、利用div的border畫一個背景的圓環

    
    /* css */
    .demo1-bg1{
        width: 100px;
        height: 100px;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        margin: 50px auto;
        background: fff;
        border-radius: 50%;
        box-shadow: 0 0 0 10px red inset;
    }

2、添加兩個子元素div，分別設置border來實現兩個半圓環并遮蓋背景圓環

    
        
        
    
    /* css */
    .demo1-bg2-1,.demo1-bg2-2{
        position: relative;
        margin: 0;
        padding: 0;
        -webkit-box-flex: 1;
        height: 80px;
        background: #fff;
        border: 10px solid grey;
    }
    .demo1-bg2-1{
        border-radius: 50px 0 0 50px;
        border-color: grey transparent grey grey;
        transform-origin: 100% 50%;
        z-index: 1;
    }
    .demo1-bg2-2{
        border-radius: 0 50px 50px 0;
        border-color: grey grey grey transparent;
        transform-origin: 0 50%;
        z-index: 2;
    }

--> -->

3、用JS旋轉兩個子元素，露出背景圓環

DIV + CSS3 實現圓環進度條

SVG

這個原理也很簡單，是利用SVG的stroke和dash-array屬性來實現，也是我常用的實現方式。

繪制一個圓環路徑，填充灰色圓環

繪制一個內圓環，半徑/圓心和外圓環一樣，剛好重疊

設置內圓環的stroke-dasharray屬性，stroke-dasharray的值得意思是，第一個值為圓環第一段填充顏色的長度，第二個值為圓環接下來不填充顏色的長度，以此類推并重復。這里設置為：stroke-dasharray="0,10000" 第一個值就是填充紅色的值，為0，第二段為不填充的長度，超過圓環的周長即可。此時進度條為0%：

這時候發現stroke-dasharray填充是從3點鐘位置開始的，所以就讓內圓環旋轉-90度：

.demo2{
    transform-origin: center;
    transform: rotate(-90deg);
}

JS控制內圓環的stroke-dasharray的值來控制內圓環第一段繪制紅色的長度

var demo2 =  document.querySelector("#J_demo2");
var btn1 = document.querySelector("#J_btn_1");
var btn2 = document.querySelector("#J_btn_2");

var circleLength = Math.floor(2 * Math.PI * demo2.getAttribute("r"));

window.onload = rotateCircle;

btn2.onclick = rotateCircle;
function rotateCircle () {
    var val = parseFloat(btn1.value).toFixed(2);
    val = Math.max(0,val);
    val = Math.min(100,val);
    demo2.setAttribute("stroke-dasharray","" + circleLength * val / 100 + ",10000");
}

SVG 實現圓環進度條

云服務器 GPU云服務器 js緩存的幾種方法環形進度條最基本的幾種 html的幾種輪播

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116421.html

基于vue的svg進度條組件

摘要：基于的簡單的進度條在線在線是什么是一款基于項目二次開發的組件功能特性零依賴體積小目前支持圓環矩形的進度條配置多滿足多樣需求持續維護安裝使用詳細介紹普通模式引入例子詳細介紹配置參數進度條類型進度條的初始值 svg-progress-bar 基于Vue.js的簡單的svg進度條 showImg(https://segmentfault.com/img/remote/146000001282...

fasss 2019-08-22 13:46 評論0 收藏0
利用canvas實現環形進度條

摘要：前提有時候在項目中會有用到進度條的情況，使用也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用來實現的方法。前提：有時候在項目中會有用到進度條的情況，使用css3也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用canvas來實現的方法。效果圖...

zombieda 2019-08-30 11:09 評論0 收藏0
利用canvas實現環形進度條

摘要：前提有時候在項目中會有用到進度條的情況，使用也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用來實現的方法。前提：有時候在項目中會有用到進度條的情況，使用css3也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用canvas來實現的方法。效果圖...

Terry_Tai 2019-08-23 18:04 評論0 收藏0