代码之家 › 专栏 › 技术社区 › kazou

圆形边框进度条[重复]

css-shapes svg css html

kazou · 技术社区 · 8 年前

我如何用CSS创建这个循环进度条?它是否可能(兼容IE10+、FF、chrome、safari…)?
我认为我们可以使用SVG来实现这一点,但我不知道如何实现。

在圆的周围,有一个根据进度百分比动态变化的小边框或阴影。如果百分比为100%,则边框将完全围绕填充进度条的圆。

2 回复 | 直到 8 年前

web-tiki 4 年前

这 圆形进度条 is由该答案改编: circular progress bar

它使用SVG和Snap。svg为计数器设置蓝色笔划和JS的动画:

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

var s = Snap('#animated');
var progress = s.select('#progress');

progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);

body{text-align:center;font-family:sans-serif;background:#080808;}
svg{width:25%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="animated" viewbox="0 0 100 100">
  <path id="progress" stroke-width="3" stroke="#4596AB" fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
  </path>
  <circle cx="50" cy="50" r="38" fill="transparent" stroke="#fff" stroke-width="1"/>
  <text id="count" x="50" y="50" fill="#fff" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>

-1

mickaelw 8 年前

我认为该网站: https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9#.2fflbvwrt 能帮你吗

您可以在此处查看演示: http://jsfiddle.net/andsens/Yns9P/ 在这一行:

window.randomize = function() {
    $('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}

你可以改变 attr('data-progress', Math.floor(Math.random() * 100)) 到 attr('data-progress', [your_pourcentage])

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

Mass · 如何在Tailwind CSS v4中创建配置

3 月前

magenta placenta · 将css变量合并为一个变量

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前