进度圈完成 [英] Progress Circle Completion

问题描述

我正在尝试创建一个基于百分比的圆的方程式或方法.

这就是我所拥有的:

我希望能够根据百分比的增加来完成圆，并使其从下图所示的一侧开始:

我正在尝试使对齐方式相似，但是我对此算不上运气.

这是我的代码:

 #progress-bar {位置:绝对；左:50％；最高:55％；转换:translate(-51％，-50％);宽度:40％;}.容器 {职位:相对宽度:100％;显示:flex;证明内容:环绕；}.container .card {职位:相对宽度:400像素；显示:flex;证明内容:中心；align-items:居中;高度:400px；border-radius:4px;文本对齐:居中；溢出:隐藏；过渡:0.5秒;}.container .card:之前{内容: '';位置:绝对；最高:0;左:-50％;宽度:100％;高度:100％;背景:rgba(255，255，255，0.03);指针事件:无；z索引:1；}.百分 {职位:相对宽度:300像素；高度:300像素；边界半径:50％；box-shadow:嵌入0 0 50px#000;背景:#222；z索引:1000；}.percent .number {位置:绝对；最高:0;左:0；宽度:100％;高度:100％;显示:flex;证明内容:中心；align-items:居中;边界半径:50％；}.percent .number h2 {颜色:#777;字体粗细:700；font-size:40px;过渡:0.5秒;}.card:hover .percent .number h2 {颜色:#fff;font-size:60px;}.percent .number h2 span {font-size:24px;颜色:#777;过渡:0.5秒;}.card:hover .percent .number h2 span {颜色:#fff;}.文本 {职位:相对颜色:#777;边距顶部:40像素;字体粗细:700；font-size:18px;字母间距:1px；文本转换:大写；过渡:0.5秒;}svg {职位:相对宽度:123％;高度:123％;z索引:1000；}svg圈子{宽度:100％;高度:100％;填充:无；中风:#191919；笔划宽度:10；笔画线帽:圆形；转换:translation(-28px，-28px);}svg circle:nth-​​child(2){笔划破折号:440;笔划破折号:calc(440-(440 * 90)/100);笔划:#00ff43；}  

 < div class ="container">< div class ="card">< div class ="box">< div class ="percent">< svg><！-< circle cx ="70" cy ="70" r ="70"></circle>< circle cx ="70" cy ="70" r ="70"></circle>->< circle cx ="50％" cy ="50％" r ="40％"</circle>< circle cx ="50％" cy ="50％" r ="40％"</circle></svg>< div class ="number">< h2> 60跨度％/span</h2></div></div>< h2 class ="text">已完成115个进球中的69个/lt/h2></div></div></div>  

解决方案

在对齐和在第二个圆上设置破折号长度都存在问题.

似乎原始代码使用了第一个圆来填充第二个圆，但是圆形div百分比已使其多余.由于圆在半径为123％的svg内的半径为40％，因此偏离了该圆div，因此无法对齐.尝试通过翻译-23px重新对齐为简化起见，我们只画了一个svg圆，该圆上将带有绿色边框的百分比，并确保它恰好在div百分比之上

现在，我们来计算绿色条，该条将显示％CSS的计算看起来像是尝试计算90％分数的破折号.但这看起来不像合法的CSS(每次执行计算都需要计算).CSS也有固定的440，大约占整个圆圈的60％.在这两个设置上从头开始，我们需要使破折号为圆的周长的n％.因此，我们计算出圆的周长，然后计算该圆的周长，并以一定的间隔绘制长度，即长度.

注意-因为您可以在带有边界或阴影的曲线上获得边缘效果，所以黑眼圈的背景已更改为半径稍小的径向渐变图像.

此代码段还有一个附加的输入元素，您可以在其中输入已达到的目标数量，以检查绿色弧线是否达到正确的长度.

  document.querySelector('.goals').addEventListener('change'，function(){var目标= parseInt(this.value);var circle = document.querySelector('circle');var percentdiv = document.querySelector('.percent');varcompleted = document.querySelector('.completed');complete.innerHTML =目标；var totaldiv = document.querySelector('.total');var total = totaldiv.innerHTML;var pc =目标* 100/总计；var r = circle.getAttribute('r').replace('％'，'')* percentdiv.clientWidth/100;//圆的实际半径var c = Math.PI *(r * 2);//周长是2 * pi * r如果(isNaN(目标)){pc = 100;}否则，如果(pc< 0){pc = 0;}否则，如果(pc> 100){pc = 100;}document.querySelector('.number h2').innerHTML = Math.floor(pc)+'< span>％</span>';;var length = pc * c/100;circle.style.strokeDasharray =长度+''+(c长度);circle.style.strokeWidth =(长度> 0)?'5％':0;});  

  * {边距:0;填充:0;框大小:border-box；}#进度条 {位置:绝对；左:50％；最高:55％；转换:translate(-51％，-50％);宽度:40％;}.容器 {职位:相对宽度:100％;显示:flex;证明内容:环绕；}.container .card {职位:相对宽度:400像素；显示:flex;证明内容:中心；align-items:居中;高度:400px；border-radius:4px;文本对齐:居中；溢出:隐藏；过渡:0.5秒;}.container .card:之前{内容: '';位置:绝对；最高:0;左:-50％;宽度:100％;高度:100％;背景:rgba(255，255，255，0.03);指针事件:无；z索引:1；}.百分 {职位:相对宽度:300像素；高度:300像素；边界半径:50％；边框颜色:透明；边界宽度:0;边框样式:无；rbox-shadow:嵌入0 0 50px#000;背景图片:径向渐变(#444 0％，#222 70％，透明70％，透明100％)；rbackground:#222；z索引:1000；}.percent .number {位置:绝对；最高:0;左:0；宽度:100％;高度:100％;显示:flex;证明内容:中心；align-items:居中;边界半径:50％；}.percent .number h2 {颜色:#777;字体粗细:700；font-size:40px;过渡:0.5秒;}.card:hover .percent .number h2 {颜色:#fff;font-size:60px;}.percent .number h2 span {font-size:24px;颜色:#777;过渡:0.5秒;}.card:hover .percent .number h2 span {颜色:#fff;}.文本 {职位:相对颜色:#777;边距顶部:40像素;字体粗细:700；font-size:18px;字母间距:1px；文本转换:大写；过渡:0.5秒;}svg {宽度:100％;高度:100％;z索引:1000；}svg圈子{填充:无；笔划宽度:0；笔画线帽:圆形；笔划:#00ff43；}  

 < div class ="container">< div class ="card">< div class ="box">< div class ="percent">< svg><圆cx ="50％" cy ="50％" r ="47.5％"</circle></svg>< div class ="number">< h2> 0跨度％/span</h2></div></div>< h2 class ="text">< span class ="completed"> 0</span>的< span class ="total"> 115</span>完成的目标</h2></div></div></div>完成的目标:< input class ="goals" type ='number'/>  

I am attempting to create an equation or method of completing the circle based on percentage.

Here is what I have:

I would like to be able to complete the circle based on percentage increase and have it start on the side like the image below:

I am trying to get the alignment to be similar but I am having no luck with that or the calculation.

Here is my code:

#progress-bar {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-51%, -50%);
  width: 40%;
}

.container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.container .card {
  position: relative;
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
  transition: 0.5s;
}

.container .card:before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
  z-index: 1;
}

.percent {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: inset 0 0 50px #000;
  background: #222;
  z-index: 1000;
}

.percent .number {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.percent .number h2 {
  color: #777;
  font-weight: 700;
  font-size: 40px;
  transition: 0.5s;
}

.card:hover .percent .number h2 {
  color: #fff;
  font-size: 60px;
}

.percent .number h2 span {
  font-size: 24px;
  color: #777;
  transition: 0.5s;
}

.card:hover .percent .number h2 span {
  color: #fff;
}

.text {
  position: relative;
  color: #777;
  margin-top: 40px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.5s;
}

svg {
  position: relative;
  width: 123%;
  height: 123%;
  z-index: 1000;
}

svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #191919;
  stroke-width: 10;
  stroke-linecap: round;
  transform: translate(-28px, -28px);
}

svg circle:nth-child(2) {
  stroke-dasharray: 440;
  stroke-dashoffset: calc( 440 - (440 * 90) / 100);
  stroke: #00ff43;
}

<div class="container">
  <div class="card">
    <div class="box">
      <div class="percent">
        <svg>
                      <!-- <circle cx="70" cy="70" r="70"></circle>
                      <circle cx="70" cy="70" r="70"></circle> -->

                      <circle cx="50%" cy="50%" r="40%"></circle>
                      <circle cx="50%" cy="50%" r="40%"></circle>
                    </svg>
        <div class="number">
          <h2>60<span>%</span></h2>
        </div>
      </div>
      <h2 class="text">69 of 115 Goals Completed</h2>
    </div>
  </div>
</div>

解决方案

There are problems both of alignment and of setting the dash length on the second circle.

It looks as though the original code used the first circle to fill the second but it has been made redundant by the circular div percentage. Alignment is off because the circle has radius 40% inside an svg of diameter 123% which sets it off from this circular div. An attempt has been made to realign by translating -23px Simplifying we draw just one svg circle which will have the percentage green border and make sure it is exactly over the div percentage

Now we come to the calculation of the green bar that will show the % The CSS has a calc which looks like an attempt to calculate the dash size for a 90% score. But it doesn't look like legal CSS (needs to be a calc for every calculation to be performed). And the CSS also has a fixed 440 which is roughly a representation of 60% not of the whole circle. Starting from scratch on these two settings, we need the dash to be n% of the circumference of the circle. So we calculate the circumference of the circle then this % of it and draw that length with a gap of cicumference - length.

Note - because you can get edge effects on curves with borders or shadows, the background of the dark circle has been changed to a radial-gradient image with slightly smaller radius.

This snippet has an additional input element where you can put in the number of goals reached to check that the green arc goes to the right length.

document.querySelector('.goals').addEventListener('change', function(){
    var goals = parseInt(this.value);
    var circle = document.querySelector('circle');
    var percentdiv = document.querySelector('.percent');
    var completed = document.querySelector('.completed');
    completed.innerHTML = goals;
    var totaldiv = document.querySelector('.total');
    var total = totaldiv.innerHTML;
    var pc = goals*100/total;
    var r = circle.getAttribute('r').replace('%','')*percentdiv.clientWidth/100;//actual radius of the circle
    var c = Math.PI*(r*2);//circumference is 2*pi*r
    
    if (isNaN(goals)) { pc = 100; }
    else if (pc < 0) { pc = 0;}
    else if (pc > 100) { pc = 100;}
    document.querySelector('.number h2').innerHTML = Math.floor(pc) + '<span>%</span>';

    var length = pc * c/100;
        
    circle.style.strokeDasharray = length + ' ' + (c-length);
    circle.style.strokeWidth = (length > 0) ? '5%': 0;
});

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
        #progress-bar {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-51%, -50%);
  width: 40%;
}

.container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.container .card {
  position: relative;
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
  transition: 0.5s;
}

.container .card:before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
  z-index: 1;
}

.percent {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border-color: transparent;
  border-width: 0;
  border-style: none;
  rbox-shadow: inset 0 0 50px #000;
  background-image: radial-gradient(#444 0%, #222 70%, transparent 70%, transparent 100%);
  rbackground: #222;
  z-index: 1000;
}

.percent .number {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.percent .number h2 {
  color: #777;
  font-weight: 700;
  font-size: 40px;
  transition: 0.5s;
}

.card:hover .percent .number h2 {
  color: #fff;
  font-size: 60px;
}

.percent .number h2 span {
  font-size: 24px;
  color: #777;
  transition: 0.5s;
}

.card:hover .percent .number h2 span {
  color: #fff;
}

.text {
  position: relative;
  color: #777;
  margin-top: 40px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.5s;
}

svg {
  width: 100%;
  height: 100%;
  z-index: 1000;
}

svg circle {
  fill: none;
  stroke-width: 0;
  stroke-linecap: round;
  stroke: #00ff43;
}

<div class="container">
  <div class="card">
    <div class="box">
      <div class="percent">
                      <svg>
                      <circle cx="50%" cy="50%" r="47.5%"></circle>
                    </svg>
        <div class="number">
          <h2>0<span>%</span></h2>
        </div>
      </div>
      <h2 class="text"><span class="completed">0</span> of <span class="total">115</span> Goals Completed</h2>
    </div>
  </div>
</div>
Goals completed: <input class="goals" type='number'/>

这篇关于进度圈完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！