css圆环进度条的几种方法

方法一:

用H5自带的canvas画圆环




    
    HTML5 Canvas 圆形进度条并显示数字百分比

    








编译结果:

css圆环进度条的几种方法_第1张图片

重写该方法,让进度条可以按照后台传过来的数据按比例显示

css圆环进度条的几种方法_第2张图片

紧接着在ts中写方法可供调用

首先在结构体中定义canvas对象:

css圆环进度条的几种方法_第3张图片

然后编写绘制内部不变的圆环的函数,此函数不是动态,可以写在主函数中

css圆环进度条的几种方法_第4张图片

编写动态外圆环,此圆环用时可以被外部动态调用

css圆环进度条的几种方法_第5张图片

最后在页面初始化数据以后调用这个圆环方法,注意,需要调用两个函数,一个是主函数,另一个是按需求所调用的外部圆环

此处只调用了一个方法,所以在显示时也只是显示一个固定的主内环,显示情况如下图

css圆环进度条的几种方法_第6张图片

方法二:用两个矩形用css动画动态画一个动态显示的圆环




    
    
    扫一扫二维码马上进入对战
    


显示情况:

css圆环进度条的几种方法_第7张图片


方法三:利用js插件编写




	
	Document
	
	


0%

显示情况

css圆环进度条的几种方法_第8张图片


如果有其他方法,希望可以在这一起汇总


你可能感兴趣的:(前端,css,前端)