如何制作圆形进度条？

Question

我想制作进度条。但是所有进度条都是水平制作的。我希望我的进度条是半轮。如何使用HTML＆amp; amp; CSS？ click here for see the image of my wanted thing.

Answer 1

您还可以使用border-radius和pseudo元素，最终使用转换或动画 以下示例或demo：

＆＃13;

＆＃13;

/* 10% = 18deg */

div {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #7F8C8C;
  display: inline-block;
  margin: 0 1em;
 }

p {
  margin: 0;
}

[data-progress] {
  width: 120px;
  height: 60px;
  border-radius: 180px 180px 0 0;
  position: relative;
  overflow: hidden;
  background: #76C7C0
}

[data-progress]:before {
  content: attr(data-progress);
  display: block;
  margin: 18px;
  background: white;
  text-align: center;
  font-size: 30px;
  line-height: 50px;
  font-weight: bold;
  font-family: helvetica;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

[data-progress]:after {
  content: '';
  background: #E2534B;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 60px;
  transform-origin: top center;
  z-index:0;
  border-radius:0 0 180px 180px ;
  box-shadow: 0 0 5px black;
}

[data-progress="20"]:after {
  transform: rotate(36deg);
}

[data-progress="50"]:after {
  transform: rotate(90deg);
}

[data-progress="80"]:after {
  transform: rotate(144deg);
}

[data-progress="100"]:after {
  transform: rotate(180deg);
}
[data-progress="..."]:after {
  animation:spin 4s infinite linear;
}

@keyframes spin {
  to {
  transform: rotate(360deg);
}
}

＆＃13;

<div>
  <p data-progress="20">20</p>
  <p>progress 1 </p>
</div>

<div>
  <p data-progress="50">50</p>
  <p>progress 2 </p>
</div>
<div>
  <p data-progress="80">80</p>
  <p>progress 3 </p>
</div>
<div>
  <p data-progress="100">100</p>
  <p>progress 4 </p>
</div>
<div>
  <p data-progress="...">In progress</p>
  <p>loading</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以看到示例on this post

我接受它并简化它以便你展示它。 You can see it here.

您可以使用此旋转值来增加或减少圆圈：

.circle[data-anim~=right] {
  -webkit-transform: rotate(50deg);
}