实现环形进度条的几种方法

Scliang 发布于2019-08-30 15:52 / 2373人阅读

摘要：环形进度条的问题，网上有很多的，也有各种不同的实现方式，很棒的实现也有很多，我这自己做一下一方面是想开阔一下自己的思路，一方面好久没看和的东西了，基础的拿来熟悉下。

环形进度条的问题，网上有很多的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的几种轮播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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