SVG画圆形进度条
2015-06-21 17:54
471 查看
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5自由者</title>
<style>
#svgForStroke {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
stroke-dasharray: 180%;
stroke-dashoffset: 0%;
stroke: #ED6E5C;
/*stroke-linecap:round;*/
fill: none;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
</style>
</head>
<body>
<svg id="svgForStroke" xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="30%" stroke-width="10%"></circle>
</svg>
<script></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- 原生js结合html5制作小飞龙的简易跳球
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- HTML5实现微信拍摄上传照片功能
- 2014 HTML5/CSS3热门动画特效TOP10
- HTML5使用DeviceOrientation实现摇一摇功能
- html5在android中的使用问题及技巧解读
- JavaScript 判断浏览器是否支持SVG的代码
- 非html5实现js版弹球游戏示例代码
- html5 canvas js(数字时钟)实例代码
- js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
- 基于jquery和svg实现超炫酷的动画特效
- 推荐10 款 SVG 动画的 JavaScript 库
- 使用js检测浏览器是否支持html5中的video标签的方法
- 如何使用HTML5地理位置定位功能
- 通过javascript把图片转化为字符画
- 使用PHP和HTML5 FormData实现无刷新文件上传教程