Guide to building an Angular circular progress indicator using Scalable Vector Graphics (SVG)

I have designed an angular circular progress bar, but I am facing an issue with making the percentage value dynamic. I have managed to retrieve the dynamic value from an API, but I am unsure of how to implement it in creating a circular progress bar using SVG. Below is the HTML skeleton and CSS that I am currently using:

.track,
    .filled {
      stroke-width: 10;
      fill: none;
    }
    
    .track {
      stroke: rgba(160, 215, 231, 0.85);
    }
    
    .filled {
      stroke: blue;
      stroke-dashoffset: 202;
      stroke-dasharray: 440;
    }
<div class="col-lg-3">
            <div class="iconbox-singleD7 dashboard-height">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="-35 0 190 190" class="mw">
                <circle class="track" cx="60" cy="60" r="55" />
                <text x="40" y="60" fill="#fff">Patients</text>
                <text x="50" y="75" fill="#fff">{{totalPatient}}</text>
                <circle class="filled" cx="60" cy="60" r="55" />
                <circle cx="30" cy="136" r="5" stroke="blue" stroke-width="3" fill="blue" /><text x="40" y="140" fill="#fff">Male {{malePercentage}}%</text>
                <circle cx="30" cy="152" r="5" stroke="rgba(160, 215, 231, 0.85)" stroke-width="3" fill="rgba(160, 215, 231, 0.85)" /><text x="40" y="155" fill="#fff">Female {{femalePercentage}}%</text>
              </svg>
            </div>
           </div>

My goal is to dynamically set the progress bar based on the percentage retrieved from the API, for example, if I get a male percentage of 70%, I want the progress bar to reflect that value. As I am not familiar with SVG, any help or guidance on achieving this would be greatly appreciated. Thank you.

cssangularsvg

Answer №1

Hey there, check out this code pen: https://codepen.io/Echyzen/pen/LYBraGB

var percentage = 75;
var a = -3.46;
var b = 440;
function changePer() {
   const finalOffset = Math.round(a*percentage+b)
   const concernedCircle = document.getElementsByClassName('filled')[0];
  concernedCircle.style.strokeDashoffset = finalOffset;
}

This code snippet extracts the values of 'a' and 'b' from an affine function. To see the 75% percentage in action, simply click on the button.

Alternatively, you can use querySelector:

var percentage = 70;
var a = -3.46;
var b = 440;
function changePer() {
   const finalOffset = Math.round(a*percentage+b)
   const concernedCircle = document.querySelector('.filled');
   concernedCircle.style.strokeDashoffset = finalOffset;
}

Answer №2

Get started with my custom-built <progress-circle> Web Component:

This Source code is open and unlicensed, available on GitHub; feel free to use it however you like. Detailed documentation can be found on Dev.to

<progress-circle value="100%">Web Development</progress-circle>
<progress-circle value="71%" stroke="red">React</progress-circle>
<progress-circle value="90%" stroke="orange">Other Frameworks</progress-circle>

<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>

<style>
  progress-circle {
    font-family: Arial;
    width: 180px; /* Custom viewport size */
  }
  progress-circle::part(label) {
    font-size:70px;
  }
</style>

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

"I'm experiencing a problem with display:inline in IIS 7 - can anyone

Unfortunately, our development web server cannot be accessed externally, so sharing a link is not possible. However, I can explain the issue we are experiencing. While creating markup for a new website on my local machine, everything appears as intended. ...

htmlcssiis

Discovering the RequestMethod's method type by using Angular 2's MockBackend

When utilizing Angular 2 MockBackend to mock the outcome and define the response based on the method type (Post|Get|...), I encountered a specific issue. An example of this scenario is shown below: if (connection.request.url.endsWith('/api/authentica ...

angularmockingconditional-statementsbackendequality-operator

Utilizing CSS to position an image at both the top and bottom of a webpage

I have been struggling to find a solution to this particular issue. My goal is to position an image at both the top and bottom of the page using a background property. I understand that by making the positioning relative, the image will be placed at the bo ...

htmlcss

Is there a method to make this package compatible with Angular version 16?

I recently integrated the ngx-hotjar package version 11.0.0 into my Angular 10 project with success. However, when trying to use it in a new Angular 16 project, I encountered the following error during ng serve: Error: src/app/app.module.ts:275:12 - error ...

javascriptangulartypescript

The global class variable encounters an error when trying to assign the value of "socket" to it

Within my class constructor, I am setting up a Socket connection and then storing the socket parameter in a global class variable (this.socket_variable = socket) so that I can access it across all functions in the class. CODE const { Server } = require(&q ...

javascriptnode.jsangularwebsocket

Adjusting the margin on an element causes a shift in the entire page's

Why is the margin of an h2 element on my page displacing the entire body downward? This seems abnormal since the h2 element is within a div container. Is there a way to address this issue? ...

htmlcss

Learn how to hide the dropdown menu in Angular 8 by detecting clicks outside of the menu area

Is there a way to hide the custom dropdown menu whenever I click outside of it? After trying the code below, I noticed that it hides even if I click on an element inside the dropdown menu: <button class="btn btn-primary btn-sm mt-1" type="button" id= ...

angulartypescript

Populate the containing div with an image element

I am looking to fill a parent div with an img, but I want the image to be a standalone img element inside the div, rather than setting it as a background property. To clarify, instead of this: div { background-image: url('someimg.jpg'); ...

htmlcss

Choose an item from the list and use the scrollbar when the menu opens

My select element has over 50 options, but the options popup and go off the page without a scroll bar. As a result, I can only see and select up to 20 options. Is there a way to make the select element display a vertical scroll bar when there are more tha ...

htmlcss

Flashing background colors on a website

Can anyone explain why this code won't alternate the background color of my website between two different colors? <script type="text/javascript"> function blinkit() { intrvl = 0; for (nTimes = 0; nTimes < 3; nTimes++) { intrv ...

jqueryhtmlcssbackground-color

What causes the Angular child component (navbar) to no longer refresh the view after a route change?

Hello everyone, I'm excited to ask my first question here. Currently, I am working on developing a social network using the MEAN stack and socket.io. One of the challenges I am facing is displaying the number of unread notifications and messages next ...

javascriptangulartypescriptsocket.ioangular2-template

What could be causing the width of a table row (tr) in a table element to not function properly, while the height is functioning as expected?

My code is as follows: .table1 { background-color: gray; display: flex; justify-content: ; align-items: ; height: 400px; margin-left: 40px; padding-left: ; } .table1 tr { background-color: blue; height: 50px; width: 50px; } <tabl ...

htmlcss

Simple user interface height to occupy the entire browser window

Adding Tabs Dynamically ... I am attempting to design a layout using this example ... however, the issue is that the page does not utilize the full height and width of the available space... I have attempted adjusting the width and height to 100% of the ...

jquerycssjquery-easyui

Integrate blogger into my website with automatic height adjustment and scrolling functionality

Check out my website here. I've integrated a blogger component into it. Can anyone provide guidance on creating parallel scroll and automatically resizing sections based on the blog's height? Thanks, M ...

htmlcssiframebloggerblogs

Nginx try_files not functioning properly for serving css and images

I am attempting to route any requests that come from https://example.com/user/whatever to my "Get Our App" page located at https://example.com/get_app.html Within my nginx.conf file, I have configured the following block: #Redirecting all requests under ...

htmlcssnginxconfiguration

Tips for manually triggering change detection in Angular 2+

I am presenting a component with the following structure: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app', moduleId: module.id, template: ` <input [value]="a" (change)="onValidate ...

angulardata-binding

Mastering the art of passing and translating languages through selected options in different components using ngx-translate

Currently, I am utilizing the ngx-translate library for localization within a specific component and it is functioning correctly. Here's the setup: I have designed a language selection dropdown component that is being used in the Login component witho ...

angularngx-translate

Deactivate the selection option in Syncfusion NumericTextbox

I have integrated an Angular NumericTextbox component from Syncfusion into my application. A problem we encountered is that when the input is clicked, it automatically gets selected. Is there a way to disable this behavior? Problem: https://gyazo.com/a72b ...

htmlangulartypescriptsyncfusionnumeric-textbox

An issue occurred during the construction of an angular project: The Tuple type '[]' with a length of '0' does not contain any elements at index '0'

When I run the command ng build --prod, I encounter the following error: ERROR in src/app/inventory/inv-parts-main-table/dialog-component/dialog-component.component.html(5,16): Tuple type '[]' of length '0' has no element at index &apo ...

javascriptangulartypescript

Is there a way to manipulate the appearance of a scroller using JavaScript?

I'm intrigued by how fellow front-end developers are able to customize the scrollbar shape on a webpage to enhance its appearance. Can anyone guide me on using JavaScript to accomplish this? ...

javascriptjqueryhtmlcss