jQuery / CSS半圆进度条用不同的颜色

Question

我是jQuery和CSS3的新手。我需要以下HTML看起来像这样：

请帮帮我。

<pre>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>10</span>%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>100</span>%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>34</span>%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>67</span>%
</div>
</pre>

块级HTML元素有一些限制：

必须用空行将它们与周围文本分开。 最外面的块元素的开始和结束标记不得缩进。 Markdown不能在HTML块中使用。

Answer 1

在这里，

我实际上没有得到你的问题，但这是我想出的，你可以相应地做出改变。

<强> HTML

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

<强> CSS

.circle {
  background: transparent;
  width: 120px; height: 120px;
  border: 12px solid;
  border-top-color: blue;
  border-right-color: red;
  border-bottom-color: green;
  border-left-color: yellow;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(359deg) }
}

为动画，转换等属性添加供应商前缀

希望它有所帮助！