那些遇到过的问题

CSS Progress Circle

Ada*_*aid 99 html5 progress css3 progress-bar css-shapes

我搜索了这个网站以查找进度条,但我能够找到的显示动画圆圈,完全100%.

我希望它停在某些百分比,如下面的屏幕截图所示.有没有办法只使用CSS才能做到这一点？

循环进度条

and*_*ens 109

我创建了一个关于如何使用CSS3和LESS JavaScript库完成该操作的教程.你可以在这里找到博客:https://medium.com/secoya-tech/a917b80c43f9

这是最终结果的jsFiddle.百分比通过data-progress属性设置.使用CSS过渡动画更改.

径向进度指示器的GIF

  • 虽然性能很高,但是对于我的app来说它无法使用= [ (4认同)
  • @Hobbes,你不能,海报在撒谎.这个答案通过名为LESS的库使用大量的Javascript. (4认同)
  • 我创建了一个Sass版本,以防万一有人想尝试一下:https://gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25 (4认同)
  • 我不知道你能用css做到这一点.尼斯. (3认同)
  • 优秀的东西.Firefox中的一个小问题(使用开发人员版本41.0a2)在转换过程中会产生可见的锐边.如果将进度设置为90并将时间转换为10秒,则很容易看到.修复只需添加`outline:1px solid transparent;`到`.mask,.fill,.shadow`组. (2认同)
  • 为了回答我自己的问题，我通过将.mask的边框半径设置为0（即删除该值）并为.fill提供了50％的边框半径，解决了该错误（在野生动物园中）。 (2认同)

Pan*_*al. 64

我只使用css创建了一个小提琴.

.wrapper {
  width: 100px; /* Set the size of the progress bar */
  height: 100px;
  position: absolute; /* Enable clipping */
  clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;  /* Only run once */
  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
  -webkit-animation-timing-function:linear; /* Linear animation */
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
  -webkit-animation-delay: 3s; /* Wait half of the animation */
  -webkit-animation-name: close-wrapper; /* Keyframes name */
}

.circle[data-anim~=left] {
  -webkit-animation-duration: 6s; /* Full animation time */
  -webkit-animation-name: left-spin;
}

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s; /* Half animation time */
  -webkit-animation-name: right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

在这里检查这个小提琴 (仅限CSS)

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400);
    
.arc1 {
    width: 160px;
    height: 160px;
    background: #00a0db;
    -webkit-transform-origin: -31% 61%;
    margin-left: -30px;
    margin-top: 20px;
    -webkit-transform: translate(-54px,50px);
    -moz-transform: translate(-54px,50px);
    -o-transform: translate(-54px,50px);
}
.arc2 {
    width: 160px;
    height: 160px;
    background: #00a0db;
    -webkit-transform: skew(45deg,0deg);
    -moz-transform: skew(45deg,0deg);
    -o-transform: skew(45deg,0deg);
    margin-left: -180px;
    margin-top: -90px;
    position: absolute;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
}

.arc-container:hover .arc2 {
    margin-left: -50px;
    -webkit-transform: skew(-20deg,0deg);
    -moz-transform: skew(-20deg,0deg);
    -o-transform: skew(-20deg,0deg);
}

.arc-wrapper {
    width: 150px;
    height: 150px;
    border-radius:150px;
    background: #424242;
    overflow:hidden;
    left: 50px;
    top: 50px;
    position: absolute;
}
.arc-hider {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    border: 50px solid #e9e9e9;
    position:absolute;
    z-index:5;
    box-shadow:inset 0px 0px 20px rgba(0,0,0,0.7);
}

.arc-inset  {
    font-family: "Josefin Sans";
    font-weight: 100;
    position: absolute;
    font-size: 413px;
    margin-top: -64px;
    z-index: 5;
    left: 30px;
    line-height: 327px;
    height: 280px;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0.2));
}
.arc-lowerInset {
    font-family: "Josefin Sans";
    font-weight: 100;
    position: absolute;
    font-size: 413px;
    margin-top: -64px;
    z-index: 5;
    left: 30px;
    line-height: 327px;
    height: 280px;
    color: white;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,1));
}
.arc-overlay {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
    background-image: -o-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);

    padding-left: 32px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 100px;
    font-family: sans-serif;
    font-weight: 400;
    text-shadow: 0 1px 0 #fff;
    font-size: 22px;
    border-radius: 100px;
    position: absolute;
    z-index: 5;
    top: 75px;
    left: 75px;
    box-shadow:0px 0px 20px rgba(0,0,0,0.7);
}
.arc-container {
    position: relative;
    background: #e9e9e9;
    height: 250px;
    width: 250px;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="arc-container">
    <div class="arc-hider"></div>
    <div class="arc-inset">
        o
    </div>
    <div class="arc-lowerInset">
        o
    </div>
    <div class="arc-overlay">
        35%
    </div>
    <div class="arc-wrapper">
        <div class="arc2"></div>
        <div class="arc1"></div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

或者这个美丽的圆形进度条带有HTML5,CSS3和JavaScript.

  • 根据 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/clip) `clip` 现在已弃用。 (3认同)

Ozz*_*ech 32

那个怎么样？

HTML

<div class="chart" id="graph" data-percent="88"></div>
Run Code Online (Sandbox Code Playgroud)

使用Javascript

var el = document.getElementById('graph'); // get canvas

var options = {
    percent:  el.getAttribute('data-percent') || 25,
    size: el.getAttribute('data-size') || 220,
    lineWidth: el.getAttribute('data-line') || 15,
    rotate: el.getAttribute('data-rotate') || 0
}

var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';

if (typeof(G_vmlCanvasManager) !== 'undefined') {
    G_vmlCanvasManager.initElement(canvas);
}

var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;

el.appendChild(span);
el.appendChild(canvas);

ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;

var drawCircle = function(color, lineWidth, percent) {
        percent = Math.min(Math.max(0, percent || 1), 1);
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
        ctx.strokeStyle = color;
        ctx.lineCap = 'round'; // butt, round or square
        ctx.lineWidth = lineWidth
        ctx.stroke();
};

drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle('#555555', options.lineWidth, options.percent / 100);
Run Code Online (Sandbox Code Playgroud)

和CSS

div {
    position:relative;
    margin:80px;
    width:220px; height:220px;
}
canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
span {
    color:#555;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
}
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/Aapn8/3410/

基本代码取自Simple PIE Chart http://rendro.github.io/easy-pie-chart/

  • 这对我来说是最好的解决方案（也没有jquery！）。 (2认同)
  • 对我也是.以下是如何为它设置动画:drawCircle('#efefef',options.lineWidth,100/100); var i = 0; var int = setInterval(function(){i ++; drawCircle('#555555',options.lineWidth,i/100); span.textContent = i +"%"; if(i> = 100){clearInterval(int);} },100); (2认同)

Loj*_*uka 24

看一下这个 ：）

我使用conic-gradient制作了这个。

background: conic-gradient(
      SomeColor1 80%,
      SomeColor2 80%
    );
Run Code Online (Sandbox Code Playgroud)

您可以使用 conic-gradient创建饼图。

div {
  background: conic-gradient(
     red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%
}
Run Code Online (Sandbox Code Playgroud)

我只为饼图选择两种颜色。

  background: conic-gradient(
          rgb(3, 133, 255) 80%,
          rgb(242, 242, 242) 80%
        );
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

然后在饼图顶部放置一个 div，使其看起来像一个圆形进度指示器。然后使用 HTML DOM insideHTML 选项设置进度。

在此输入图像描述

然后您可以使用incrementProgress() 和decrementProgress() 函数来动态更改进度。

按照我的完整示例来了解一些想法:)

您可以使用它制作上传/下载进度指示器、仪表板图表等。

background: conic-gradient(
      SomeColor1 80%,
      SomeColor2 80%
    );
Run Code Online (Sandbox Code Playgroud)

  • 现在这很优雅......非常感谢你，你是一颗宝石！ (5认同)

Dav*_*lli 19

一种仅使用一个元素和几个属性的简约方法：

\n

在此输入图像描述

\n

用于data-progress定义内部标签并定义从到 的--progress进度。0deg360deg

\n
<div data-progress="36" style="--progress: 36deg;">36%</div>\n
Run Code Online (Sandbox Code Playgroud)\n

\r\n
\r\n
div {\n  display: flex;\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  background: conic-gradient(red var(--progress), gray 0deg);\n  font-size: 0;\n}\n\ndiv::after {\n  content: attr(data-progress) \'%\';\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  width: 100%;\n  margin: 10px;\n  border-radius: 50%;\n  background: white;\n  font-size: 1rem;\n  text-align: center;\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div data-progress="36" style="--progress: 36deg;">36%</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

这是一种 na\xc3\xafve 动画方法，同样是所有 CSS，没有 JS，只有一个元素：

\n

\r\n
\r\n
div {\n  display: flex;\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  background: conic-gradient(red var(--progress), gray 0deg);\n  font-size: 0;\n  animation: .4s ease-out turn_in reverse; \n}\n\ndiv::after {\n  content: attr(data-progress);\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  width: 100%;\n  margin: 10px;\n  border-radius: 50%;\n  background: white;\n  font-size: 1rem;\n  text-align: center;\n}\n\n@keyframes turn_in {\n  5% {\n    background: conic-gradient(red calc(var(--progress) * .95), gray 0deg);\n  }\n  10% {\n    background: conic-gradient(red calc(var(--progress) * .9), gray 0deg);\n  }\n  15% {\n    background: conic-gradient(red calc(var(--progress) * .85), gray 0deg);\n  }\n  20% {\n    background: conic-gradient(red calc(var(--progress) * .8), gray 0deg);\n  }\n  25% {\n    background: conic-gradient(red calc(var(--progress) * .75), gray 0deg);\n  }\n  30% {\n    background: conic-gradient(red calc(var(--progress) * .7), gray 0deg);\n  }\n  35% {\n    background: conic-gradient(red calc(var(--progress) * .65), gray 0deg);\n  }\n  40% {\n    background: conic-gradient(red calc(var(--progress) * .6), gray 0deg);\n  }\n  45% {\n    background: conic-gradient(red calc(var(--progress) * .55), gray 0deg);\n  }\n  50% {\n    background: conic-gradient(red calc(var(--progress) * .5), gray 0deg);\n  }\n  55% {\n    background: conic-gradient(red calc(var(--progress) * .45), gray 0deg);\n  }\n  60% {\n    background: conic-gradient(red calc(var(--progress) * .4), gray 0deg);\n  }\n  65% {\n    background: conic-gradient(red calc(var(--progress) * .35), gray 0deg);\n  }\n  70% {\n    background: conic-gradient(red calc(var(--progress) * 0.3), gray 0deg);\n  }\n  75% {\n    background: conic-gradient(red calc(var(--progress) * 0.25), gray 0deg);\n  }\n  80% {\n    background: conic-gradient(red calc(var(--progress) * .2), gray 0deg);\n    }\n  85% {\n    background: conic-gradient(red calc(var(--progress) * .15), gray 0deg);\n    }\n  90% {\n      background: conic-gradient(red calc(var(--progress) * .1), gray 0deg);\n    }\n  95% {\n      background: conic-gradient(red calc(var(--progress) * .05), gray 0deg);\n    }\n100% {\n    background: conic-gradient(gray 0deg);\n  }\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div data-progress="85%" style="--progress: 85%;">85%</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

免责声明：交叉浏览未经测试。

\n

  • 不确定，但是当我将 div 的宽度和高度更改为类似 60px 且进度为 60 度时，我会得到整个圆圈的颜色，就像它是 100% 一样。我通过乘以 60 * 3.6 解决了它，现在工作正常 (2认同)

小智 10

Another pure css based solution that is based on two clipped rounded elements that i rotate to get to the right angle:

http://jsfiddle.net/maayan/byT76/

That's the basic css that enables it:

.clip1 {
    position:absolute;
    top:0;left:0;
    width:200px;
    height:200px;
    clip:rect(0px,200px,200px,100px);
}
.slice1 {
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px,100px,200px,0px);
    -moz-border-radius:100px;
    -webkit-border-radius:100px; 
    border-radius:100px;
    background-color:#f7e5e1;
    border-color:#f7e5e1;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}

.clip2 
{
    position:absolute;
    top:0;left:0;
    width:200px;
    height:200px;
    clip:rect(0,100px,200px,0px);
}

.slice2
{
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px,200px,200px,100px);
    -moz-border-radius:100px;
    -webkit-border-radius:100px; 
    border-radius:100px;
    background-color:#f7e5e1;
    border-color:#f7e5e1;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}
Run Code Online (Sandbox Code Playgroud)

and the js rotates it as required.

quite easy to understand..

Hope it helps, Maayan

Utt*_*ath 6

接受您的数据后，您可以更改流程，例如<div ... data-num="50">输出50%，以显示完全动画的圆圈和数字。

  • 在某一方面的变化data-num="/* 0-100 */"。
  • 您可以添加多个进程，例如5,10.
  • 使用Javascript, CSS,Html与动画circle和number.

Output

在此输入图像描述

Code 

let items = document.querySelectorAll('.progress-item');
const counters = Array(items.length);
const intervals = Array(items.length);
counters.fill(0);
items.forEach((number,index) => {
  intervals[index] = setInterval(() => {
          if(counters[index] == parseInt(number.dataset.num)){
              clearInterval(intervals[index]);
          }else{
              counters[index] += 1;
              number.style.background = "conic-gradient(red calc(" + counters[index] + "%), gray 0deg)";
              number.setAttribute('data-value', counters[index] + "%");
              number.innerHTML = counters[index] + "%";
          }
  }, 15);
 });
Run Code Online (Sandbox Code Playgroud) 
#progress{
  display: flex;
  justify-content: space-around;
}
.progress-item {
  display: flex;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 0;
  animation: .4s ease-out reverse; 
}

.progress-item::after {
  content: attr(data-value);
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100px;
  margin: 10px;
  border-radius: 50%;
  background: white;
  font-size: 1rem;
  text-align: center;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="progress" >
  <div data-num="40" class="progress-item">sd</div> 
  <div data-num="80" class="progress-item">sd</div>
  <div data-num="57" class="progress-item">sd</div>  
  <div data-num="83" class="progress-item">sd</div>  
  <div data-num="90" class="progress-item">ds</div>
</div>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

321269 次

最近记录：

5 年，11 月 前
圆形/径向进度条 28
更多相关链接
相关归档
JS - 如何用JavaScript删除图像？ 14
LocalStorage无法在iPad和iPhone上运行 12
将客户端生成的数据保存为JavaScript中的文件 10
在Android中实现类似于iOS的旋转活动指示器 9
用CSS包装一个长单词 9
Jquery移动或响应式设计？ 8
HTML5本地存储和Chrome 5
CSS3径向渐变显示为线条 5
QT中的进度条问题 1
CSS:不是选择器来定位特定类型的输入 1
难疑归档
如何检查jQuery中是否隐藏了一个元素？ 7481
AngularJS:服务与提供商vs工厂 3296
如何在不手动指定编码的情况下在C#中获得字符串的一致字节表示？ 2121
如何在PHP中解析和处理HTML/XML？ 2071
带请求正文的HTTP GET 1896
在Python中获取列表的最后一个元素 1871
如何在Linux中对文件进行符号链接？ 1865
如何在MySQL中使用命令行导入SQL文件？ 1836
如何用"喜欢"查询MongoDB？ 1331
JavaScript中是否有常量？ 1118