CSS进度圆形

Question

我在这个网站上搜索了进度条，但找到的那些都是显示动画圆圈一直转到100%的。

我想让它在特定的百分比停下来，就像下面截图中所示。有没有只使用CSS的方法可以实现？

- Adam GunShy Said

---

我不是在寻找脚本，我是在寻找关于此的任何CSS3信息。 - Adam GunShy Said

那张截图来自哪个网站？ - MoralCode

如果您正在使用LESS，您可能会对http://www.cssscript.com/pure-css-circular-percentage-bar/感兴趣。 - jchook

Answer 1

我使用只有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);
  }
}

<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>

也可以查看这个示例（仅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;
}

<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>

或者，使用HTML5、CSS3和JavaScript创建一个漂亮的圆形进度条

- Panos Kalatzantonakis

---

http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar - Roko C. Buljan

@panos 我尝试了你的第一个解决方案。我需要.circle边框为6px而不是10px。我已经实现了相同的效果，但在达到50％时会出现抖动并重新开始动画。请试一下。 - Santhosh Kumar

@Santosh-kumar，你还需要改变其他的值。 - Panos Kalatzantonakis

@panos 我怎样才能改变第一个解决方案的进度？可以通过数据元素完成吗？我对动画还比较陌生。 - anthonytherockjohnson

根据MDN的说明，"clip"属性现已被弃用。 - jstaab

Answer 2

那方面的问题？

HTML

<div class="chart" id="graph" data-percent="88"></div>

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);
    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);

和 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;
}

https://jsfiddle.net/4a90uyo1/

基本代码取自简单的饼图http://rendro.github.io/easy-pie-chart/

- OzzyCzech

---

这对我来说是最好的解决方案（没有使用jQuery！）。 - Andy B

我也需要。下面是如何使其动起来的方法：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); - marlar

如何将渐变颜色设置到圆形上？ - yaniv14

Answer 3

看看这个 :)

我使用圆锥渐变制作了这个。

background: conic-gradient(
      SomeColor1 80%,
      SomeColor2 80%
    );

您可以使用锥形渐变(conic-gradient)创建饼图。

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

我只选择了两种颜色来制作饼图。

  background: conic-gradient(
          rgb(3, 133, 255) 80%,
          rgb(242, 242, 242) 80%
        );

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

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

请按照我的完整示例进行操作，以获得一些想法 :)

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

<html>
  <head>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #progress-spinner {
        border-radius: 50%;
        height: 100px;
        width: 100px;
      }

      #middle-circle {
        position: absolute;
        border-radius: 50%;
        height: 80px;
        width: 80px;
        background-color: rgb(248, 248, 248);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: large;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div
      style="
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      "
    >
      <div
        style="
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <div id="middle-circle"></div>
        <div id="progress-spinner"></div>
      </div>

      <div style="margin-top: 30px">
        <button type="button" id="incbtn">+</button>
        <button type="button" id="decbtn">-</button>
      </div>
    </div>

    <script>
      var progress = 0;

      document
        .getElementById("incbtn")
        .addEventListener("click", incrementProgress);
      document
        .getElementById("decbtn")
        .addEventListener("click", decrementProgress);

      function incrementProgress() {
        if (progress != 100) {
          progress = progress + 10;
          console.log(progress);
          setProgress();
        }
      }

      function decrementProgress() {
        if (progress != 0) {
          progress = progress - 10;
          console.log(progress);
          setProgress();
        }
      }

      function setProgress() {
        document.getElementById("progress-spinner").style.background =
          "conic-gradient(rgb(3, 133, 255) " +
          progress +
          "%,rgb(242, 242, 242) " +
          progress +
          "%)";

        document.getElementById("middle-circle").innerHTML =
          progress.toString() + "%";
      }

      window.onload = function () {
        setProgress();
      };
    </script>
  </body>
</html>

- Lojith Vinsuka

---

现在这太优雅了...非常感谢，你真是一颗宝石！ - fruitloaf

现在我因为你学到了新东西，谢谢 :) - BimaPria_4420

Answer 4

一种极简主义方法，只需要一个元素和几个属性:

使用 data-progress 定义内部标签，使用 --progress 定义从 0deg 到 360deg 的进度。

<div data-progress="36" style="--progress: 36deg;">36%</div>

div {
  display: flex;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(red var(--progress), gray 0deg);
  font-size: 0;
}

div::after {
  content: attr(data-progress) '%';
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 10px;
  border-radius: 50%;
  background: white;
  font-size: 1rem;
  text-align: center;
}

<div data-progress="36" style="--progress: 36deg;">36%</div>

这是一个天真的动画方法，再次强调全部使用 CSS，没有 JS，并且只用了一个元素：

div {
  display: flex;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(red var(--progress), gray 0deg);
  font-size: 0;
  animation: .4s ease-out turn_in reverse; 
}

div::after {
  content: attr(data-progress);
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 10px;
  border-radius: 50%;
  background: white;
  font-size: 1rem;
  text-align: center;
}

@keyframes turn_in {
  5% {
    background: conic-gradient(red calc(var(--progress) * .95), gray 0deg);
  }
  10% {
    background: conic-gradient(red calc(var(--progress) * .9), gray 0deg);
  }
  15% {
    background: conic-gradient(red calc(var(--progress) * .85), gray 0deg);
  }
  20% {
    background: conic-gradient(red calc(var(--progress) * .8), gray 0deg);
  }
  25% {
    background: conic-gradient(red calc(var(--progress) * .75), gray 0deg);
  }
  30% {
    background: conic-gradient(red calc(var(--progress) * .7), gray 0deg);
  }
  35% {
    background: conic-gradient(red calc(var(--progress) * .65), gray 0deg);
  }
  40% {
    background: conic-gradient(red calc(var(--progress) * .6), gray 0deg);
  }
  45% {
    background: conic-gradient(red calc(var(--progress) * .55), gray 0deg);
  }
  50% {
    background: conic-gradient(red calc(var(--progress) * .5), gray 0deg);
  }
  55% {
    background: conic-gradient(red calc(var(--progress) * .45), gray 0deg);
  }
  60% {
    background: conic-gradient(red calc(var(--progress) * .4), gray 0deg);
  }
  65% {
    background: conic-gradient(red calc(var(--progress) * .35), gray 0deg);
  }
  70% {
    background: conic-gradient(red calc(var(--progress) * 0.3), gray 0deg);
  }
  75% {
    background: conic-gradient(red calc(var(--progress) * 0.25), gray 0deg);
  }
  80% {
    background: conic-gradient(red calc(var(--progress) * .2), gray 0deg);
    }
  85% {
    background: conic-gradient(red calc(var(--progress) * .15), gray 0deg);
    }
  90% {
      background: conic-gradient(red calc(var(--progress) * .1), gray 0deg);
    }
  95% {
      background: conic-gradient(red calc(var(--progress) * .05), gray 0deg);
    }
100% {
    background: conic-gradient(gray 0deg);
  }
}

<div data-progress="85%" style="--progress: 85%;">85%</div>

免责声明：未测试跨浏览器的兼容性。

- David Riccitelli

---

我刚意识到 OP 还要求动画... 我会看一下，但我猜使用 0 度作为初始状态应该很简单。 - David Riccitelli

你好，当div的宽度和高度小于100px（即60x60像素）时，你会如何计算进度？ - medBouzid

@medBouzid 进度是通过 conic-gradient 显示的，因此宽度/高度不应该很重要。 - David Riccitelli

不确定，但当我将 div 的宽度和高度更改为像 60px 这样的值，并使用 60 度的进度时，完整的圆形被着色，就好像它是100％一样。我通过将 60*3.6 相乘来解决了这个问题，现在它工作得很好。 - medBouzid

这个例子可以改进，不要暗示deg应该得到与percent相同的值。 - lyle

Answer 5

另一种基于纯CSS的解决方案，它基于两个被剪辑的圆角元素，我旋转它们以达到正确的角度：

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

这是启用它的基本CSS：

.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);
}

并且 JavaScript 根据需要旋转它。

非常容易理解。

希望这有所帮助， Maayan

- Maayan

---

在jQuery中，不需要在.css()中设置所有的-vendor-prefixes♪ 只需使用transform: 'rotate(' + degree + 'deg)'即可。 - Roko C. Buljan

这是更简单、更清晰的代码，我从 @Maayan 的示例开始工作，得到了这个：http://jsfiddle.net/g8z64Ler/ - lukart

Answer 6

通过更改 <div ... data-num="50"> 的数值，您可以改变进程并使其输出为 50% 。这将显示完全动画的圆和数字。

• 更改 data-num="/* 0-100 */" 中的数值。
• 您可以添加多个进程，如 5,10。
• 使用 JavaScript、CSS 和 HTML 进行带有动画效果的圆形和数字。

输出结果如下

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);
 });

#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;
}

<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>

- Uttam Nath

---

不错的解决方案，但是你片段中的JS需要移动到一个函数中，并使用“document.onload”、“defer”或其他任何你喜欢的方式来调用它。除此之外，这是我目前最喜欢的解决方案。它不依赖CSS规则“@property”（该规则当前不受Firefox和Safari支持），也不包含jQuery或任何其他可怕的库。 - DataVader

Answer 7

使用新的@property概念。 请查看支持表格

@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}

.circle {
  width: 120px;
  height: 120px;
  padding: 12px;
  box-sizing: border-box;
  -webkit-mask:
    conic-gradient(#000 var(--a), transparent var(--a)),
    linear-gradient(#000, #000) content-box;
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  background: tomato;
  border-radius: 50%;
  animation: progress 1s .3s linear forwards;
}

@keyframes progress {
  to {
    --a: 250deg;
  }
}

<div class="circle"></div>

我看到了一个更为强大的示例，由Alvaro Montoro制作。一定要查看这个。

- doğukan

---

由于webkit-mask的浏览器兼容性，您可能希望对此保持警惕，https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite - Samuel Akhaze

Answer 8

可用于径向进度条的灵活SVG解决方案（仅使用CSS）：通过calc计算SVG内圆形边框长度的解决方案。

示例中的进度圆覆盖在元素上，可以是透明的。

jQuery(function($){
 setTimeout(() => $('#element1 [data-role="radial-progress"]').css('--progress-percent', '100'), 1000);
 $('#element2 [data-role="radial-progress"]').css('--progress-percent', '80');
 $('#element3 [data-role="radial-progress"]').css('--progress-percent', '100');
 
 let progress4 = 0;
 let progress4incrementor = setInterval(() => {
  progress4++;
  $('#element4 .value').html(progress4 + '%');
  $('#element4 [data-role="radial-progress"]').css('--progress-percent', progress4.toString());
  if (progress4 >= 100) clearInterval(progress4incrementor);
 }, 100);
});

.element
{
  position: relative;
}
[data-role="radial-progress"]
{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    --progress-percent: 0;
  --progress-color: #CC000077;
  --progress-bar-width: 100%;
}
[data-role="radial-progress"] > circle
{
    stroke-width: var(--progress-bar-width);
    stroke-dasharray: calc(100% * 3.141592);
    stroke-dashoffset: calc(100% * (100 - var(--progress-percent))/100 * 3.141592);
    stroke: var(--progress-color);
}



/*Just for animate --data-percent */
#element1 [data-role="radial-progress"] > circle
{
  transition: stroke-dashoffset 4s linear;
}

#element2 [data-role="radial-progress"] > circle
{
  transition: stroke-dashoffset 2s linear;
}
#element3 [data-role="radial-progress"] > circle
{
  transition: stroke-dashoffset 6s linear;
}
#element4 [data-role="radial-progress"] > circle
{
  transition: stroke-dashoffset 0.1s linear;
}
/*Сode that does not depend on radial-progress*/
.element
{
  background-image: url(https://static.wikia.nocookie.net/dune/images/2/2f/Duneii-wind-trap.jpg/revision/latest);
  background-size: 100% 100%;
  display: inline-block;
  width: 180px;
  height: 110px;
  border: 2px solid red;
  text-align: center;
  color: red;
}
#element3
{
  width: 110px;
}
#element3 [data-role="radial-progress"]
{
  transform: rotate(-90deg);
}

#element4
{
 display: inline-flex;
 align-items: center;
 justify-content: center;
}
#element4 .value
{
   font-size: 2em;
   font-weight: bold;
   z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="element1" class="element">
  Content
  <svg data-role="radial-progress" width="100%" height="100%" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle r="50%" cx="50%" cy="50%" fill="transparent"></circle></svg>
</div>

<div id="element2" class="element">
  Content
  <svg style="--progress-percent:30" data-role="radial-progress" width="100%" height="100%" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle r="50%" cx="50%" cy="50%" fill="transparent"></circle></svg>
</div>


<div id="element3" class="element">
  Content
  <svg style="--progress-bar-width:10px;--progress-color:red;" data-role="radial-progress" width="100%" height="100%" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle r="44%" cx="50%" cy="50%" fill="transparent"></circle></svg>
</div>

<div id="element4" class="element">
  <span class="value">0%</span>
  <svg data-role="radial-progress" width="100%" height="100%" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle r="50%" cx="50%" cy="50%" fill="transparent"></circle></svg>
</div>

- Alexander Goncharov