How To Make Roundable Progress Bar?

I want to make a progress bar. But all of the progress bar was made horizontally. I want my progress bar was made half round. How is it possible using HTML & CSS? click here fo

Solution 1:

you can also use border-radius and pseudo elements and eventually use transition or animation example below or demo:

/* 10% = 18deg */div {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #7F8C8C;
  display: inline-block;
  margin: 01em;
 }

p {
  margin: 0;
}

[data-progress] {
  width: 120px;
  height: 60px;
  border-radius: 180px180px00;
  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:00180px180px ;
  box-shadow: 005px 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);
}
}

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

Solution 2:

You can see an example on this post

I take it and simplify it for you to show it. You can see it here.

You can play with this value of rotate to increase or decrease the circle :

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