資訊專欄INFORMATION COLUMN
摘要：環(huán)形進度條的問題，網上有很多的，也有各種不同的實現方式，很棒的實現也有很多，我這自己做一下一方面是想開闊一下自己的思路，一方面好久沒看和的東西了，基礎的拿來熟悉下。
環(huán)形進度條的問題，網上有很多的demo，也有各種不同的實現方式，很棒的實現也有很多，我這自己做一下一方面是想開闊一下自己的思路，一方面好久沒看SVG和Canvas的東西了，基礎的拿來熟悉下。
DIV + CSS3這個是最基本的實現方式，我在想怎樣用盡量少的DOM結構來實現，最終還是用了三個div，不過這個方法僅供開闊思路，樣式表現在PC還好，手機上的問題就多了，僅供參考。
1、利用div的border畫一個背景的圓環(huán)
/* 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來實現兩個半圓環(huán)并遮蓋背景圓環(huán)
/* 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旋轉兩個子元素，露出背景圓環(huán)
DIV + CSS3 實現圓環(huán)進度條
SVG這個原理也很簡單，是利用SVG的stroke和dash-array屬性來實現，也是我常用的實現方式。
繪制一個圓環(huán)路徑，填充灰色圓環(huán)
繪制一個內圓環(huán)，半徑/圓心和外圓環(huán)一樣，剛好重疊
設置內圓環(huán)的stroke-dasharray屬性，stroke-dasharray的值得意思是，第一個值為圓環(huán)第一段填充顏色的長度，第二個值為圓環(huán)接下來不填充顏色的長度，以此類推并重復。這里設置為：stroke-dasharray="0,10000" 第一個值就是填充紅色的值，為0，第二段為不填充的長度，超過圓環(huán)的周長即可。此時進度條為0%：
這時候發(fā)現stroke-dasharray填充是從3點鐘位置開始的，所以就讓內圓環(huán)旋轉-90度：
.demo2{
transform-origin: center;
transform: rotate(-90deg);
}
JS控制內圓環(huán)的stroke-dasharray的值來控制內圓環(huán)第一段繪制紅色的長度
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 實現圓環(huán)進度條
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/116421.html
摘要：基于的簡單的進度條在線在線是什么是一款基于項目二次開發(fā)的組件功能特性零依賴體積小目前支持圓環(huán)矩形的進度條配置多滿足多樣需求持續(xù)維護安裝使用詳細介紹普通模式引入例子詳細介紹配置參數進度條類型進度條的初始值 svg-progress-bar 基于Vue.js的簡單的svg進度條 showImg(https://segmentfault.com/img/remote/146000001282...
摘要：前提有時候在項目中會有用到進度條的情況，使用也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用來實現的方法。 前提：有時候在項目中會有用到進度條的情況，使用css3也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用canvas來實現的方法。 效果圖...
摘要：前提有時候在項目中會有用到進度條的情況，使用也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用來實現的方法。 前提：有時候在項目中會有用到進度條的情況，使用css3也可以實現，但是對于性能不好的設備，或者網絡不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用canvas來實現的方法。 效果圖...
閱讀 1638·2019-08-30 15:54
閱讀 2385·2019-08-30 15:52
閱讀 2076·2019-08-29 15:33
閱讀 3050·2019-08-28 17:56
閱讀 3248·2019-08-26 13:54
閱讀 1683·2019-08-26 12:16
閱讀 2457·2019-08-26 11:51
閱讀 1656·2019-08-26 10:26
