环状进度条progress bar circle

简介: 环状进度条progress bar circle

2014-08-05

https://ld:44354/sap(bD1lbiZjPTAwMQ==)/bc/bsp/sap/zprod_ui5/progress.htm

实现原理:


index.js里以100毫秒为时间间隔定期执行一个匿名函数. 在这个函数里,动态设置当前progress circle的class。


image.png

可以在chrome console里观察到该函数周期性的执行:


image.png


在html file里,每个1%的进度都有一组对应的class。每个class通过transform 实现动画效果。

image.png


可以在chrome 里观察到degree的变化:


image.png

相关文章
|
11月前
145Echarts - 矩形树图(Show Parent Labels)
145Echarts - 矩形树图(Show Parent Labels)
57 0
|
4月前
|
小程序 前端开发
解决小程序 scroll-view 里面的image有间距、小程序里面的图片之间有空隙的问题。
解决小程序 scroll-view 里面的image有间距、小程序里面的图片之间有空隙的问题。
|
17天前
progress元素
【9月更文挑战第1天】progress元素。
28 2
|
3月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
38 3
|
11月前
32Echarts - 柱状图(Bar Label Rotation)
32Echarts - 柱状图(Bar Label Rotation)
42 0
|
数据可视化 Python
进度条Progress的用法介绍
进度条Progress的用法介绍
185 0
|
存储
使用Dynamic Data Display控件绘图时无法删除已经画好的曲线
最近在使用Dynamic Data Display画图的时候发现,多次画图时,之前画的图无法清除,造成图像混乱。找了好久发现这样可以消除。 在调用AddLineGraph时,使用一个全局的变量来存储这个方法返回的对象(LineGraph), 点击...
909 0
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(一)
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(一)
198 0
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(一)
|
Dart 开发者
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(二)
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(二)
194 0
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )(二)