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);
}
Post a Comment for "How To Make Roundable Progress Bar?"