Unique Angular Circular Progress Bar SVG Interface Customization

Question

Unique Angular Circular Progress Bar SVG Interface Customization

The circular progress bar I have created was inspired by the angular-circular-progress repository on GitHub.

This is my current progress input:

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

I am looking to customize the end of the progress bar with a small CIRCLE and a VALUE CENTRE that shows real-time animation value based on svg movement. How can I achieve this? Your help would be greatly appreciated.

This is the expected output:

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

Here is my current code snippet:

angular.module('myModule', ['angular-circular-progress'])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://pencil.my/assets/js/circularProgress.js"></script>

<div ng-app="myModule">
<circular-progress
    value="80"
    max="100"
    orientation="1"
    radius="100"
    stroke="10"
    base-color="#fff"
    progress-color="#f9991d"
    iterations="100"
    animation="easeInOutCubic"
></circular-progress>
  </div>

javascript angularjs svg progress-bar drawing

Answer 1

Answer №1

Have you checked out ProgressBar.js for your needs?

var bar = new ProgressBar.Circle(container, {

    color: '#aaa',
   // Make sure to adjust size accordingly to prevent clipping
   strokeWidth: 4,
   trailWidth: 1,
   easing: 'easeInOut',
   duration: 1400,
   text: {
        autoStyleContainer: false
   },
   from: { color: '#aaa', width: 1 },
   to: { color: '#333', width: 4 },
   step: function(state, circle) {
       circle.path.setAttribute('stroke', state.color);
       circle.path.setAttribute('stroke-width', state.width);

        var value = Math.round(circle.value() * 100);
        if (value === 0) {
            circle.setText(''); 
        } else {
            circle.setText(value);
        }
}

Here is a Fiddle example.

Best regards, Alex

Answer 2

Have you checked out ProgressBar.js for your needs?

var bar = new ProgressBar.Circle(container, {

    color: '#aaa',
   // Make sure to adjust size accordingly to prevent clipping
   strokeWidth: 4,
   trailWidth: 1,
   easing: 'easeInOut',
   duration: 1400,
   text: {
        autoStyleContainer: false
   },
   from: { color: '#aaa', width: 1 },
   to: { color: '#333', width: 4 },
   step: function(state, circle) {
       circle.path.setAttribute('stroke', state.color);
       circle.path.setAttribute('stroke-width', state.width);

        var value = Math.round(circle.value() * 100);
        if (value === 0) {
            circle.setText(''); 
        } else {
            circle.setText(value);
        }
}

Here is a Fiddle example.

Best regards, Alex

Answer 3

Answer №2

To achieve a dynamic effect with your circle, consider creating a group that incorporates a transparent object the same size as your circle. Position the small circle at one edge of this group and then proceed to rotate the group around its center. The structure of the SVG code for this could resemble:

<g id="pip" transform="rotate({{360/value}}, 50, 50)">
<!--The contents inside g tag-->
</g>

This method assumes that the diameter of the circle is set at 100 units.

Answer 4

To achieve a dynamic effect with your circle, consider creating a group that incorporates a transparent object the same size as your circle. Position the small circle at one edge of this group and then proceed to rotate the group around its center. The structure of the SVG code for this could resemble:

<g id="pip" transform="rotate({{360/value}}, 50, 50)">
<!--The contents inside g tag-->
</g>

This method assumes that the diameter of the circle is set at 100 units.

Answer 5

Answer №3

Below is a simple function that can be used to map a number ranging from 0 to 100 to x and y coordinates necessary for outlining a circular path of a circle object using canvas tools:

function drawCircle(percentage, ctx) {
  var angle = percentage / 100.0;

  var xPos = 140 * Math.cos((angle * (2 * Math.PI)) - (Math.PI * .5));
  var yPos = -140 * Math.sin((angle * (2 * Math.PI)) - (Math.PI * .5) );

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.beginPath();
  ctx.arc (xPos + 150, 150 - yPos, 10, 0, 2 * Math.PI);
  ctx.stroke();
}

To witness this function in action, check out the following plunker link: https://plnkr.co/edit/ePMK7DVLB3OH15oUJzr1?p=preview

This process involves taking the input number (ranging from 0 to 100), scaling it accordingly, converting it into radians, and finally transforming these radians into Cartesian coordinates.

Answer 6

Below is a simple function that can be used to map a number ranging from 0 to 100 to x and y coordinates necessary for outlining a circular path of a circle object using canvas tools:

function drawCircle(percentage, ctx) {
  var angle = percentage / 100.0;

  var xPos = 140 * Math.cos((angle * (2 * Math.PI)) - (Math.PI * .5));
  var yPos = -140 * Math.sin((angle * (2 * Math.PI)) - (Math.PI * .5) );

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.beginPath();
  ctx.arc (xPos + 150, 150 - yPos, 10, 0, 2 * Math.PI);
  ctx.stroke();
}

To witness this function in action, check out the following plunker link: https://plnkr.co/edit/ePMK7DVLB3OH15oUJzr1?p=preview

This process involves taking the input number (ranging from 0 to 100), scaling it accordingly, converting it into radians, and finally transforming these radians into Cartesian coordinates.

Unique Angular Circular Progress Bar SVG Interface Customization

Answer №1

Answer №2

Answer №3

Similar questions

Unusual Behavior Causing Error: 'RangeError: Invalid time value'

Modify the input field in the datepicker to resemble a button

What steps can I take to help EventListener locate a specific class if it is experiencing difficulty?

The functionality of loading JSON is not working properly in ePub3

Updating and Preserving Content in Angular

What is the primary function for Express.js and Node.js 10 in Google Cloud Functions?

What is the most effective method for utilizing JSON as a database?

What methods can be employed to reduce additional background tasks when altering a state in a React component?

JavaScript on Event

Implementing React with multiple event listeners for a single click event

attempting to retrieve the selected values from within an iframe

Is there a way to reduce the code needed by typing {{id}} instead of {{object.id}} when working with JSON in AngularJS?

What are the steps to prevent Phonegap InAppBrowser from caching the URL content?

JavaScript is sending a variable to a .php file, which then returns data based on the variable. The information is displayed using JavaScript and AJAX, along with triggers set using the bind('input', function

Change the page using JavaScript after submission

Guide on programmatically choosing an option within a variable with the help of jQuery

The statement "document.getElementById('grand_total_display').innerHTML = "Total is : $"+variable;" is causing issues in Internet Explorer versions 6 and 7

It appears that the setup function completes its execution before the onMount function is called in Vue 3

Interacting with APIs in Svelte applications

How can a button be linked directly to a particular list item?