I am looking to create a rounded circular progress bar with smooth edges

I'm looking to create a circular progress bar with rounded edges on the highlighted segment, similar to this example:

https://i.sstatic.net/kNKyzm.png

While I've managed to create a basic version, I'm struggling to achieve the rounded ends for the progress 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>

javascripthtmlcss

Answer №1

One simple method is to utilize SVG along with a circle element. The circle can have the property stroke-linecap: round, which is precisely what you require. Furthermore, you have the ability to manage the progress bar using the 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; /* Adjust value to shift progress bar */
}
#progress-border {
  stroke: hsl(161, 100%, 37%);
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-dasharray: 440;
  stroke-dashoffset: 140; /* Adjust 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue I'm encountering is with adjusting the width of the "li" element. I previously faced a similar challenge with the "div" width, but managed to resolve it. My goal is to set the width of the "li" to 50%, but I'm having difficulty achieving

<ul> <li>test 1</li> <li>test 2</li> <li>test 3</li> <li>test 4</li> <li>test 5</li> <li>test 6</li> </ul> *{ margin:0; padding:0; box-sizing:border-box; ...

htmlcss

Error message when converting obj to js file: Unable to locate .mtl file

I have a Python script that can convert .obj files to .json files which can be found here. I attempted to convert messi.obj to messi.js using this script, but encountered the following error message: Couldn't find messi.mtl file Why does the .mtl fi ...

javascriptpythonthree.js

waiting for a task to be carried out

Currently, I am working with a function called doSomething() which can be triggered by various DOM events. Is it feasible to listen not just for an event, but for the exact moment when this function is executed? To clarify - I am unable to modify the orig ...

javascriptrxjsrxjs5rxjs6

Is there a way to stop a music track from playing?

function playMusic(){ var music = new Audio('musicfile.mp3'); if (music.paused) { music.play(); } else { music.pause(); } } <input type="button" value="sound" onclick="playMusic()" ...

javascripthtmlcssaudio

Accumulation of style from various directives in AngularJS on a single element

Currently, I am working on developing a component framework and find myself in need of a method to apply styles from multiple directives to an element in a way that they can accumulate. The priority of the styles should be determined by the directive creat ...

cssangularjsangularjs-directive

Troubleshooting the issue with a styled subcomponent in React using Styled Components

Recently, I've delved into React and have been experimenting with creating a Modal component using styled components. My goal is to achieve a similar effect to Framer Motion's motion.div, but utilizing styled components instead. Currently, I hav ...

javascriptcssreactjsnext.jsstyled-components

Triggering successive jQuery confirm boxes once the previous one has finished processing

I am facing an issue with my API call response where I receive an array and need to open jQuery Confirm one by one for each item in the response. The problem is that they all open at once. Below is the code snippet: axios.post('/orders/ask-for-or ...

javascriptjqueryaxiosconfirm

JS Code for Optimal Viewing on Mobile Devices

I'm struggling with creating 3 image columns in 2 columns on mobile. It seems like there is a JS issue related to the minslide:3 and maxslide:3 conditions... When viewed on mobile, it's displaying 3 slides instead of 2. How can I adjust it to sh ...

javascriptjqueryhtmlcssjquery-mobile

how to arrange wordpress menu items in a vertical layout

Looking to display the sub-submenus of my site beneath their parent menu node similar to the layout of the Oracle website. Utilized a theme called Oracle, and it's visually appealing. Now, the goal is to exhibit the sub sub menus directly under their ...

htmlcsswordpresswordpress-theming

Ways to run evaluations on 'private' functions within an angular service using Karma and Jasmine

In my Angular application, I have a BracketService that consists of various functions for comparing weights and creating brackets based on weight groups. The service includes functions like compareByWeight, filterWeightGroup, and createBracketsByWeightGrou ...

javascriptangularjsunit-testingjasmineangular-services

Utilize Tailwind CSS in React to dynamically highlight the active navigation item on click

Check out my navigation bar code: <nav className="bg-white shadow dark:bg-gray-800"> <div className="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300"> <Link ...

javascriptreactjstypescriptnavbartailwind-css

Mouse over the image to reveal a fresh window

I'm attempting to achieve a similar effect to that of this website (you may need to register to view it). Here's the image that illustrates it: As you can observe, when I hover over the image, a box appears and then when I hover over the YouTube ...

javascriptjquery

Tips for modifying fullcalendar's renderEvents handler to include custom code

Currently, I am working with fullcalendar 1.6.3 in conjunction with Drupal 7 (which is why I have to stick with version 1.6.3 for now). Every time the calendar view changes through ajax requests - whether moving forward or backward in time or switching bet ...

javascriptjqueryajaxfullcalendarjquery-events

"Easily toggle the visibility of values in checkboxes and organize them into groups with the power of JavaScript

Hey there! I am currently working on a project that involves grouping checkboxes and hiding/unhiding their content based on user interaction. Essentially, when the page first loads, the "All CARS" checkbox will be checked by default. If I then check the "C ...

javascriptjqueryhtml

Mastering Kendo UI in Vue: The Ultimate Guide to Managing Child Checkboxes in TreeView

I am currently utilizing Telerik's Vue wrappers for Kendo UI. With the TreeView control, both the jQuery version and MVC wrappers have a feature that allows a property to automatically check child checkboxes when the parent checkbox is checked. ...

htmlkendo-uivue.js

Waiting for user submission before executing a JavaScript function

const onSubmit = ()=>{ someFunction().then(()=>{ // next step is to wait for user interaction by clicking a specific button // user initiates the action // perform specific task }) } Essentially, after the initial form submissi ...

javascriptreactjs

Tips for creating a navigation bar that bypasses body padding in HTML and CSS

I have set padding in my 'body' tag, but I want my top navigation bar to cover the entire page without being affected by it. I attempted to fix this by setting the width to 100% and using negative padding and margin values, but it did not work a ...

htmlcss

Retrieve the attribute value from an HTML element in a JSON response using JavaScript

I received a JSON request result containing a blogger post. // API callback posts( { "version": "1.0", "encoding": "UTF-8", "entry": { "title": { "type": "text", "$t": "Vimeo Embed Video Post" ...

javascriptjqueryjson

Use jQuery to activate the radio button inside a div whenever it is triggered by a change

How can I check which radio button list is clicked and then send a jQuery ajax call for the clicked item? Currently, I have tables with the IDs plan1, plan2, plan3 generated using PHP. Each table has a radio button list. Using jQuery each, how can I achiev ...

javascriptphpjqueryajaxradio-button

`res.render when all data queries are completed``

When I make an app.get request in my server.js file, I retrieve a dataset from MongoDB and then render my page while passing the data to it. Here is an example: //page load app.get('/', (req, res) => { //find all data in test table ...

javascriptnode.jsmongodbexpress