不同颜色的jQuery/CSS循环进度条

qni6mghb 于 11个月前发布在 jQuery

关注(0)|答案(1)|浏览(113)

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

的数据
请帮帮我

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

字符串

jquery

来源：https://stackoverflow.com/questions/45339250/jquery-css-semicircle-progress-bar-with-different-colors

1条答案

按热度按时间

xu3bshqb1#

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

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

型
为属性添加厂商前缀，如动画、变换等。
希望有帮助！

赞(0）回复(0）举报 11个月前

我来回答

不同颜色的jQuery/CSS循环进度条

1条答案

相关问题

热门标签

最新问答