html 进度条roll,js实现增加数字显示的环形进度条效果

效果如下：

代码如下：

.wapper{

position:absolute;

left:100px;

top:100px;

box-sizing:border-box;

}

.text{

position:absolute;

left:30px;

top:40px;

font-family:"Microsoft YaHei";

font-weight:bold;

color:indianred;

}

.rect{

position:absolute;

width:50px;

height:100px;

overflow:hidden;

}

.right{

left:50px;

}

.circle{

position:absolute;

width:100px;

height:100px;

border-radius:50%;

box-sizing:border-box;

border:5px solid indianred;

}

.circle_right{

left:-50px;

clip:rect(0px 50px 100px 0px);

animation:roll 5s linear 0s 1 forwards;

}

.circle_left{

clip:rect(0px 100px 100px 50px);

animation:roll 5s linear 5s 1 forwards;

}

@keyframes roll{

0%{transform:rotate(0deg)}

100%{ transform:rotate(180deg)}

}

window.οnlοad=function(){

var $num=document.getElementById('num');

(function(){

var i=1,timer;

add();

function add(){

var timer=setTimeout(function(){

add();

},100);

$num.innerHTML=i;

i<100?i++:clearTimeout(timer)

}

})();

}

html 进度条roll,js实现增加数字显示的环形进度条效果相关推荐

Swift - 环形进度条（UIActivityIndicatorView）的用法
Swift中,除了条形进度条外,还有环形进度条,效果图如下: 1,环形进度条的基本属性 (1)Style: Large White:比较大的白色环形进度条 White:白色环形进度条 Gray:灰色环 ...
WKWebView Safari调试、JS互调、加载进度条、JS中alert、confirm、prompt
主要内容 Safari调试 swift/OC与JS互调增加加载进度条支持JS中alert.confirm.prompt Safari调试设置 -> safari --> 高级,开启J ...
js svg语音波动动画_SVG实现环形进度条的原理
之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制.具体效果如下 ...
ProgressBar.js – 漂亮的响应式 SVG 进度条
ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆 ...
vue.js 利用canvas绘制仪表盘圆环进度条-带动画
vue.js 利用canvas绘制简易仪表盘进度条 html代码因为动画效果比较消耗性能,所以进度条单独canvas绘制 <template><div class="ci ...
echarts实现环形进度条
效果图实现代码可直接复制运行: <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
html 可调节进度条控件,jQuery简单实用的轻量级进度条插件
jQMeter是一款简单实用的轻量级进度条jQuery插件,它可以显示为水平或垂直进度条,进度条加载时带有动画特效,你只需要简单的传入一些参数到jQMeter对象的构造函数中就可以完成你想要的进度条效 ...
LtRecyclerView:自带上拉下拉,能增加头条目和尾条目的RecyclerView
LtRecyclerView:自带上拉下拉,能增加头条目和尾条目的RecyclerView 点击查看2.x版本,功能更强大主要功能: 自带上拉加载和下拉刷新可以添加100条头条目和尾条目(其实是可 ...
canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"><p>抱歉, ...

html 进度条roll,js实现增加数字显示的环形进度条效果

html 进度条roll,js实现增加数字显示的环形进度条效果相关推荐

最新文章

热门文章