SVG画圆形进度条

原创 2015年06月21日 17:54:31
<!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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

用svg制作圆形进度条动画效果 js 并且能监听滚动条百分比

前语:感觉自己好久没来写博客了,前段时间换了新工作接触了新项目,可能是因为一直在熟悉项目的原因感觉都没啥可以更的,这几天,设计要求在页面上做一个圆形进度条,要求能跟着滚动条滚动的值才改变圆形进度条的值...
  • gl0ry
  • gl0ry
  • 2017年04月20日 16:18
  • 1319

svg制作圆圈百分比数据-进度条

突然接到需求,说需要做一个好评率百分比的效果,要有进度条的效果,还要是圆形的,博主也是对svg会一点点,在网上找了圆弧的计算方法,就写了这么个效果,适应了公司的需求,本文有不足之处,希望大家多多提提意...
  • l284969634
  • l284969634
  • 2016年11月08日 17:37
  • 1741

svg 绘制曲线动态进度条 避免canvas锯齿问题

本例使用css3 特性 svg动态描边绘制圆形进度条。需要进度条有动态效果,使用canvas绘制时,曲线会出现锯齿现象。消除锯齿比较麻烦,于是使用svg动态描边实现,还可避免复杂的js绘图。代码: ...
  • lj745280746
  • lj745280746
  • 2015年10月08日 16:23
  • 2154

用svg制作圆形进度条动画效果 js 并且能监听滚动条百分比

前语:感觉自己好久没来写博客了,前段时间换了新工作接触了新项目,可能是因为一直在熟悉项目的原因感觉都没啥可以更的,这几天,设计要求在页面上做一个圆形进度条,要求能跟着滚动条滚动的值才改变圆形进度条的值...
  • gl0ry
  • gl0ry
  • 2017年04月20日 16:18
  • 1319

vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果

vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果 需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度。 progr...
  • Fabulous1111
  • Fabulous1111
  • 2018年01月16日 00:35
  • 39

iOS圆形进度条带动画效果

  • 2015年07月10日 17:46
  • 3KB
  • 下载

android带动画的圆形进度条

偶然发现一个很好的app,圆环进度条,带加速动画,看起来相当不错。尝试着克隆一下。 反编译一看,哇塞,啥3.1415926都干出来了,太高端玩不转啊,算了,想想其它方式吧。 先看效果图: ...
  • explorerqp
  • explorerqp
  • 2016年06月30日 12:00
  • 4352

android自定义控件之圆形进度条(带动画)

首先贴上图片: 额,感觉还行吧,就是进度条的颜色丑了点,不过咱是程序员,不是美工,配色这种问题当然不在考虑范围之内了 下面说重点,如何来写一个这样的自定义控件。 ...
  • zhaoyufei133
  • zhaoyufei133
  • 2018年01月09日 09:35
  • 30

android带动画的圆形进度条 各种差值器的含义

偶然发现一个很好的app,圆环进度条,带加速动画,看起来相当不错。尝试着克隆一下。 反编译一看,哇塞,啥3.1415926都干出来了,太高端玩不转啊,算了,想想其它方式吧。 先看效果图: ...
  • mp624183768
  • mp624183768
  • 2017年05月04日 09:44
  • 215

自定义view画圆形进度条(进度为初始设置的值,不变化)

很多的时候,系统自带的View满足不了我们功能的需求,那么我们就需要自己来自定义一个能满足我们需求的View,自定义View我们需要先继承View,添加类的构造方法,重写父类View的一些方法,例如o...
  • qq_38219041
  • qq_38219041
  • 2017年06月11日 21:08
  • 73
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SVG画圆形进度条
举报原因:
原因补充:

(最多只允许输入30个字)