0
193
ViewsI need to make a circular progress bar with rounded ends
I need to create a circular progress bar. The highlighted segment has an outline and the end points are rounded, like this:
I did this one, but I can't create the rounded edges of progress segment line.
.pie {
display: inline-block;
margin: .5em;
width: 8em;
height: 8em;
position: relative;
border-radius: 50%;
}
.pie:after {
border-radius: 50%;
display: block;
content: "";
background: #fff;
position: absolute;
left: .5em;
top: .5em;
height: 7em;
width: 7em;
}
.p1 {
background-image: linear-gradient(-30deg, #ddd 50%, transparent 50%),
linear-gradient(90deg, #ddd 50%, steelblue 50%);
}<div class="pie p1"></div>
·
Juan Pablo Isaza
1 answers
Answer question0
Easy way use svg with circle. The circle has property stroke-linecap: round exactly what you need. And you can control the progress bar with property stroke-dashoffset.
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
color: hsl(231, 9%, 16%);
background-color: hsl(240, 20%, 98%);
position: relative;
}
section {
display: flex;
flex-flow: column;
align-items: center;
gap: .5rem;
}
h3,
span {
line-height: 1;
}
section span {
font-size: 2em;
font-weight: 500;
}
div {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5em;
}
svg {
height: 150px;
width: 150px;
transform: rotate(0deg);
}
#progress,
#progress-border,
#track,
#border-track {
fill: transparent;
}
#progress {
stroke: hsl(161, 100%, 43%);
stroke-width: 14px;
stroke-linecap: round;
stroke-dasharray: 440;
stroke-dashoffset: 140; /* Change number value to shift progress bar */
}
#progress-border {
stroke: hsl(161, 100%, 37%);
stroke-width: 10px;
stroke-linecap: round;
stroke-dasharray: 440;
stroke-dashoffset: 140; /* Change number value to shift progress bar */
}
#track {
stroke: hsl(0, 0%, 100%);
stroke-width: 10px;
}
#border-track {
stroke: hsl(0, 0%, 93%);
stroke-width: 12px;
}<section>
<div>
<h3>Text</h3>
<svg>
<circle id="border-track" cx="75" cy="75" r="65"></circle>
<circle id="track" cx="75" cy="75" r="65"></circle>
<circle id="progress" cx="75" cy="75" r="65"></circle>
<circle id="progress-border" cx="75" cy="75" r="65"></circle>
</svg>
</div>
<span>70%</span>
</section>
·
Juan Pablo Isaza
Report
Answer question