多个CSS进度栏HTML页面

问题描述

我有一段CSS圆形进度条HTML

我对情节进行了样式设置，但一切正常，但

问题是我在同一页面中有很多图，并且使用for循环生成它

因此需要命名每种绘图样式crad（.card：nth-​​child（1）和2 ...）

{% for welTsts in WellTsTProDChart %}
<div  class="container">
  <div class="row">
    <div class="col-lg-6">
      <div class="card card-success">
        <div class="card-header">
                        <h3 class="card-title">Production Tests: <var id="OIlVar">{{welTsts.TestOIL}}</var> Oil  (m3/D)
                        <var id="WATVar">{{welTsts.TestWTR}}</var></h3>
        </div>

<style>
.card:nth-child(1) svg circle:nth-child(2)
{
  stroke-dashoffset: calc(440 - (440 * {{welTsts.get_OCUT}}) / 100);
  stroke: #28a745;
}
</style>

        <div class="container1 w3-light-grey solid">
          <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>
                </svg>
              <div class="number">
                <h2>{{welTsts.get_OCUT}}<span>%</span></h2>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 

{% endfor %}

，它仅采用最后一个值并将其应用于所有图

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）