blocks|key|185642|text|另一个基于纯css的解决方案，它基于两个经过裁剪的圆角元素，我将它们旋转到正确的角度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185643|http://jsfiddle.net/maayan/byT76/|offset|length|185644|这是实现它的基本css：|185645|.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);
}|code-block|syntax|javascript|185646|并且js根据需要旋转它。|185647|很容易理解..|185648|希望对你有帮助，马延|185649|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|X|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|18|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|C]]]]

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

<p><a href="http://jsfiddle.net/maayan/byT76/">http://jsfiddle.net/maayan/byT76/</a></p>

<p>That's the basic css that enables it:</p>

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

<p>and the js rotates it as required.</p>

<p>quite easy to understand..</p>

<p>Hope it helps,
Maayan</p>


blocks|key|403840|text|那又如何呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|403841|HTML|403842|<div+class="chart"+id="graph"+data-percent="88"></div>|code-block|syntax|javascript|403843|Javascript|403844|var+el+=+document.getElementById('graph');+//+get+canvas

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

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

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+%2B+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+%7C%7C+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);|403845|和CSS|403846|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;
}|403847|http://jsfiddle.net/Aapn8/3410/|offset|length|403848|基本代码取自简单饼图http://rendro.github.io/easy-pie-chart/|403849|entityMap|0|LINK|mutability|MUTABLE|url|1|http://rendro.github.io/easy-pie-chart/^0|0|0|0|0|0|0|0|0|V|0|0|A|13|1|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@$S|1D|T|1E|1|1F]]|A|$]]|$1|U|3|V|5|6|7|1G|8|@]|9|@$S|1H|T|1I|1|1J]]|A|$]]|$1|W|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|R]]|13|$5|Z|10|11|A|$12|14]]]]

<p>What about that?</p>

<p>HTML</p>

<pre><code>&lt;div class="chart" id="graph" data-percent="88"&gt;&lt;/div&gt;
</code></pre>

<p>Javascript</p>

<pre><code>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);
</code></pre>

<p>and CSS</p>

<pre><code>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;
}
</code></pre>

<p><a href="http://jsfiddle.net/Aapn8/3410/" rel="noreferrer">http://jsfiddle.net/Aapn8/3410/</a></p>

<p>Basic code was taken from Simple PIE Chart <a href="http://rendro.github.io/easy-pie-chart/" rel="noreferrer">http://rendro.github.io/easy-pie-chart/</a></p>


blocks|key|403888|text|用于径向进度条(仅限CSS)的灵活SVG解决方案:计算(通过计算)+SVG内圆的边框长度的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|403889|样本中的进度圆圈覆盖在元素上，并且可以是透明的。|403890|​|403891|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%2B%2B;
++$('#element4+.value').html(progress4+%2B+'%25');
++$('#element4+[data-role="radial-progress"]').css('--progress-percent',+progress4.toString());
++if+(progress4+>=+100)+clearInterval(progress4incrementor);
+},+100);
});|code-block|syntax|javascript|403892|.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%25;
}
[data-role="radial-progress"]+>+circle
{
++++stroke-width:+var(--progress-bar-width);
++++stroke-dasharray:+calc(100%25+*+3.141592);
++++stroke-dashoffset:+calc(100%25+*+(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%25+100%25;
++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;
}|403893|<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%25"+height="100%25"+viewPort="0+0+100+100"+version="1.1"+xmlns="http://www.w3.org/2000/svg"><circle+r="50%25"+cx="50%25"+cy="50%25"+fill="transparent"></circle></svg>
</div>

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

<div+id="element4"+class="element">
++<span+class="value">0%25</span>
++<svg+data-role="radial-progress"+width="100%25"+height="100%25"+viewPort="0+0+100+100"+version="1.1"+xmlns="http://www.w3.org/2000/svg"><circle+r="50%25"+cx="50%25"+cy="50%25"+fill="transparent"></circle></svg>
</div>|403894|403895|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|U|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|M|3|N|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|O|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>Flexible SVG solution for radial progress-bar (CSS only): the solution in calculating(via calc) border length of circle inside SVG.</p>
<p>Progress-circle in samples is overlay on element, and may be transparent.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(function($){
 setTimeout(() =&gt; $('#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(() =&gt; {
  progress4++;
  $('#element4 .value').html(progress4 + '%');
  $('#element4 [data-role="radial-progress"]').css('--progress-percent', progress4.toString());
  if (progress4 &gt;= 100) clearInterval(progress4incrementor);
 }, 100);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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"] &gt; 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"] &gt; circle
{
  transition: stroke-dashoffset 4s linear;
}

#element2 [data-role="radial-progress"] &gt; circle
{
  transition: stroke-dashoffset 2s linear;
}
#element3 [data-role="radial-progress"] &gt; circle
{
  transition: stroke-dashoffset 6s linear;
}
#element4 [data-role="radial-progress"] &gt; 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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

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

&lt;div id="element2" class="element"&gt;
  Content
  &lt;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"&gt;&lt;circle r="50%" cx="50%" cy="50%" fill="transparent"&gt;&lt;/circle&gt;&lt;/svg&gt;
&lt;/div&gt;


&lt;div id="element3" class="element"&gt;
  Content
  &lt;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"&gt;&lt;circle r="44%" cx="50%" cy="50%" fill="transparent"&gt;&lt;/circle&gt;&lt;/svg&gt;
&lt;/div&gt;

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


blocks|key|185837|text|查看以下内容:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185838|这是我用conic-gradient做的。|offset|length|185839|background:+conic-gradient(
++++++SomeColor1+80%25,
++++++SomeColor2+80%25
++++);|code-block|syntax|javascript|185840|您可以使用圆锥梯度创建pie+chart。|185841|div+{
++background:+conic-gradient(
+++++red+36deg,+orange+36deg+170deg,+yellow+170deg);
++border-radius:+50%25
}|185842|我只为饼图选择了两种颜色。|185843|++background:+conic-gradient(
++++++++++rgb(3,+133,+255)+80%25,
++++++++++rgb(242,+242,+242)+80%25
++++++++);|185844|​|185845|📷|atomic|185846|185847|然后在饼图顶部放置一个div，使其看起来像一个循环进度指示器。然后使用HTML+DOM+innerHTML选项设置进度。|185848|185849|185850|185851|然后，您可以使用incrementProgress()和decrementProgress()函数动态更改进度。|185852|请参考我的完整示例，以获得一些概念:)|185853|您可以使用此工具设置仪表板的上传/下载进度指示器、图表等。|185854|185855|<html>
++<head>
++++<style>
++++++body+{
++++++++display:+flex;
++++++++align-items:+center;
++++++++justify-content:+center;
++++++}

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

++++++#middle-circle+{
++++++++position:+absolute;
++++++++border-radius:+50%25;
++++++++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">%2B</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+%2B+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)+"+%2B
++++++++++progress+%2B
++++++++++"%25,rgb(242,+242,+242)+"+%2B
++++++++++progress+%2B
++++++++++"%25)";

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

++++++window.onload+=+function+()+{
++++++++setProgress();
++++++};
++++</script>
++</body>
</html>|185856|185857|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient())|1|https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()#gradient_pie-chart|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/e9d4eee2e3fbad69f935ad98d4648f7d.png|imageAlt|3|https://ask.qcloudimg.com/http-save/yehe-900000/5647eced5e901f758276138aa7e7829b.png^0|0|4|E|0|0|0|B|9|1|0|0|0|0|0|0|1|2|0|0|0|0|0|1|3|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1W|8|@]|9|@$D|1X|E|1Y|1|1Z]]|A|$]]|$1|F|3|G|5|H|7|20|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|21|8|@]|9|@$D|22|E|23|1|24]]|A|$]]|$1|M|3|N|5|H|7|25|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|26|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|27|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|28|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|29|8|@]|9|@$D|2A|E|2B|1|2C]]|A|$]]|$1|X|3|T|5|6|7|2D|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|2E|8|@]|9|@]|A|$]]|$1|10|3|T|5|6|7|2F|8|@]|9|@]|A|$]]|$1|11|3|V|5|W|7|2G|8|@]|9|@$D|2H|E|2I|1|2J]]|A|$]]|$1|12|3|T|5|6|7|2K|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2L|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|2M|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|2N|8|@]|9|@]|A|$]]|$1|19|3|T|5|6|7|2O|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|H|7|2P|8|@]|9|@]|A|$I|J]]|$1|1C|3|T|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|2R|8|@]|9|@]|A|$]]]|1E|$1F|$5|1G|1H|1I|A|$1J|1K]]|1L|$5|1G|1H|1I|A|$1J|1M]]|1N|$5|1O|1H|1P|A|$1Q|1R|1S|-4]]|1T|$5|1O|1H|1P|A|$1Q|1U|1S|-4]]]]

<p>Check this out :)</p>
<p>I made this one using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()" rel="nofollow noreferrer">conic-gradient</a>.</p>
<pre><code>background: conic-gradient(
      SomeColor1 80%,
      SomeColor2 80%
    );
</code></pre>
<p>You can create a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()#gradient_pie-chart" rel="nofollow noreferrer">pie chart</a> using conic-gradient.</p>
<pre><code>div {
  background: conic-gradient(
     red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%
}
</code></pre>
<p>I select only two colors for the pie chart.</p>
<pre><code>  background: conic-gradient(
          rgb(3, 133, 255) 80%,
          rgb(242, 242, 242) 80%
        );
</code></pre>
<p><a href="https://i.stack.imgur.com/112jN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/112jN.png" alt="enter image description here" /></a></p>
<p>then place a div on top of the pie chart to make it looks like a circular progress indicator. Then set progress using HTML DOM innerHTML option.</p>
<p><a href="https://i.stack.imgur.com/oqmNW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oqmNW.png" alt="enter image description here" /></a></p>
<p>Then you can use incrementProgress() and decrementProgress() fuctions to change progress dynamically.</p>
<p>Follow my complete example to get some idea :)</p>
<p>You can make upload/download progress indicators, charts for dashboards, etc. using this.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      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;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div
      style="
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      "
    &gt;
      &lt;div
        style="
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      &gt;
        &lt;div id="middle-circle"&gt;&lt;/div&gt;
        &lt;div id="progress-spinner"&gt;&lt;/div&gt;
      &lt;/div&gt;

      &lt;div style="margin-top: 30px"&gt;
        &lt;button type="button" id="incbtn"&gt;+&lt;/button&gt;
        &lt;button type="button" id="decbtn"&gt;-&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
      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();
      };
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|185871|text|新的@property有不同的想法。See+the+support+table|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|185872|​|185873|@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%25;
++animation:+progress+1s+.3s+linear+forwards;
}

@keyframes+progress+{
++to+{
++++--a:+250deg;
++}
}|code-block|syntax|javascript|185874|<div+class="circle"></div>|185875|185876|我看到了Alvaro+Montoro的一个更强大的例子。一定要看看这个。|185877|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/@property|1|https://caniuse.com/mdn-css_at-rules_property|2|https://codepen.io/alvaromontoro/pen/LYjZqzP^0|2|9|2|9|0|I|L|1|0|0|0|0|0|4|E|2|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]|$9|19|A|1A|1|1B]]|E|$]]|$1|F|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|R|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]|11|$5|U|V|W|E|$X|12]]]]

<p>A different idea with new <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@property" rel="nofollow noreferrer"><code>@property</code></a>. <a href="https://caniuse.com/mdn-css_at-rules_property" rel="nofollow noreferrer">See the support table</a></p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@property --a {
  syntax: '&lt;angle&gt;';
  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;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>And I saw a more powerful example by <a href="https://codepen.io/alvaromontoro/pen/LYjZqzP" rel="nofollow noreferrer">Alvaro Montoro</a>. Be sure to check this out.</p>


<p>I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%.</p>

<p>I would like it to stop at certain percentages like in the screenshot below. Is there any way I can do that using only CSS?</p>

<p><a href="https://i.stack.imgur.com/DzNnN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DzNnN.png" alt="Circular progress bars"></a></p>


CSS Progress Circle

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经搜索了这个网站来寻找进度条，但是我能够找到的那些显示完全达到100%的动画圆圈。我希望它停止在特定的百分比，如下面的截图所示。有没有办法只用CSS就能做到呢？​​

问CSS进度循环
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS进度循环EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS进度循环
EN