crisbeto/angular-svg-round-progressbar

Angular module that uses SVG to create a circular progressbar

Angular SVG round progressbar

Angular module that uses SVG to create a circular progressbar

Demo

Click here for the Angular 1.x version

Install

First you have to install the module through npm:

npm install angular-svg-round-progressbar --save

Afterwards you need to import the RoundProgressModule in your module:

import {NgModule} from '@angular/core';
import {RoundProgressModule} from 'angular-svg-round-progressbar';

@NgModule({
  imports: [RoundProgressModule]
})
export class YourModule {}

Or RoundProgressComponent, if you're using standalone:

import {Component} from '@angular/core';
import {RoundProgressComponent} from 'angular-svg-round-progressbar';

@Component({
  standalone: true,
  imports: [RoundProgressComponent],
  template: '...'
})
export class YourComponent {}

If you're using SystemJS as your module loader, there is also a UMD bundle at ./node_modules/angular-svg-round-progressbar/bundles/angular-svg-round-progressbar.umd.js.

Options

Name	Description	Required	Default value	Possible values
current	The current progress. Limited by the max option.	Yes	undefined	number
max	The progress' maximum value.	Yes	undefined	number
radius	Radius of the circle.	No	125	number
color	The color of the current value on the circle.	No	#45ccce	string
background	Color of the circle's background.	No	#eaeaea	string
stroke	Specifies the circle's thickness.	No	15	number
semicircle	Whether the progressbar should be a full circle or a semicircle.	No	false	boolean
clockwise	Whether the progressbar should rotate clockwise or counter-clockwise.	No	true	boolean
responsive	Whether the progressbar should fit inside its parent container. Note Turning this option on will override the specified radius in order to make the circle fit in its parent. The radius to stroke ratio won't change.	No	false	boolean
rounded	Whether the current progress ending should be rounded or straight.	No	false	boolean
duration	The duration of the animation. Pass 0 for no animation.	No	800	number
animationDelay	Milliseconds to wait before starting an animation.	No	0	number
onRender	Callback function that gets executed every time the circle is animated. The function gets called with the current progress as it is being animated.	No	undefined	Function
animation	The easing function that will be used when animating.	No	easeOutCubic	linearEase easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce

Minimal example:

<round-progress [current]="current" [max]="max"/>

Full example:

<round-progress
    [current]="current"
    [max]="max"
    [color]="'#45ccce'"
    [background]="'#eaeaea'"
    [radius]="125"
    [stroke]="20"
    [semicircle]="true"
    [rounded]="true"
    [clockwise]="false"
    [responsive]="false"
    [duration]="800"
    [animation]="'easeInOutQuart'"
    [animationDelay]="0"
    (onRender)="doSomethingWithCurrentValue($event)"/>

Configuring the default values

The module comes with some pre-configured options for things like colors, size, stroke etc. If these don't match your app's design, you can change the global defaults by providing a new value for the ROUND_PROGRESS_DEFAULTS injection token. Whenever an option isn't defined on a round-progress element, it's value will be taken from the defaults.

import {NgModule} from '@angular/core';
import {
  RoundProgressModule,
  RoundProgressConfig,
  ROUND_PROGRESS_DEFAULTS
} from 'angular-svg-round-progressbar';

@NgModule({
  imports: [RoundProgressModule],
  providers: [{
    provide: ROUND_PROGRESS_DEFAULTS,
    useValue: {
      color: '#f00',
      background: '#0f0'
    }
  }]
})
export class YourModule {};

Browser support

• Internet Explorer 9+
• Firefox 28.0+
• Chrome 31+
• Safari 5.1+
• and pretty much any browser that supports SVG

Note: Some older browsers may require (a polyfill for requestAnimationFrame). Read more about the requestAnimationFrame browser support.

Development

The project uses yarn to manage dependencies to make sure that you have it installed.

• yarn to install development dependencies.
• yarn lint to lint the source files.
• yarn start to run a development server. Go to localhost:4200 to see the demo.
• yarn build-lib to build the library in production mode.
• yarn build-demo to build the demo in production mode.
• yarn release-lib to build the library and release it to npm.
• yarn release-demo to build the demo and deploy it to GitHub Pages.

Credits

• Modernizr for the SVG support test
• Robert Penner for the easing function
• opsb for some of the math

angular-svg-round-progressbar's Issues

Grandients not working (again?)

Hi there :)

We are using version 0.3.7 and the suggestion listed here #29 is not working.
When we set the color to a solid #F00 it works fine.

Any suggestions?

Non angular dependent version

Any plans to a version that is not dependent on angular?

Counter Clockwise animation

Is it possible to animate the circle counter clockwise?

Can we add a border?

Hello,
I wanted to add border to this circle both from inside and outside. Is there a way to customize? If yes then how?

Regards,
Shraddha

Error: easingAnimation is not a function. (In 'easingAnimation(currentTime, start, changeInValue, duration)', 'easingAnimation' is undefined)

I used ionic framework (side-menu), when i toggle the side menu bar, it caused this
Error: easingAnimation is not a function. (In 'easingAnimation(currentTime, start, changeInValue, duration)', 'easingAnimation' is undefined)

Is it the animation conflict with ionic side menu animation ?

Your system information:

Cordova CLI: 5.0.0
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 1.1.0
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
ios-deploy version: Not installed
ios-sim version: 3.1.1
OS: Mac OS X Yosemite
Node Version: v0.12.2
Xcode version: Xcode 7.1 Build version 7B91b

How to inverse the semi circle progress bar

Can I get semi circle progress bar inverted with all its current functionality?

Basics

I know that i might seem stupid, but it doesn't work to me. First, at the beggining, in section, i added "<script src="js/roundProgress.js"></script>", and later, where i want progressbar to be, i added "

"
What am i doing wrong?

can we implement progress bar with one side butt and other side rounded?

can the progress bar be updated with one side butt and other side rounded?

Missing Documentation for Percentages

The upload progress demo shows that percentages are possible but the documentation for the options do not indicate how to accomplish this.

Error rendering round when current > max

I'm facing a problem rendering the progressbar when the value exceeds the max value defined in the div parameter.

I want to display percents, so my max value should be 100, but i could need to display a percent value higher than 100, in which case I would like to show the bar full filled and the value.

A quick fix for me would be to write a function that returns the highest value between 100 and the current value and set that as the max value.

In the attached image below:

• a) The problem I got: max value is 100, current is 146.
• b) I set 200 as max value to show that in that case it renders ok.

color ramp transition

I'm wondering if there's an easy way to set specific bar colors for various percentages similar to what I'm doing over here, currently using the old spritesheet technique http://ancientbeast.com/units/#Miss_Creeper

Gives an SVG error but works

When it's the initial loading it gives 2 errors like

Error: Invalid value for attribute d="M NaN NaN A 47.5 47.5 0 1 0 50 2.5" <----> jquery.js:6990
Error: Invalid value for attribute d="M NaN NaN A 47.5 47.5 0 1 0 50 2.5" <----> jquery.js:6990

<div round-progress
                    max="100"
                    current="vm.avg.count"
                    color="#45ccce"
                    bgcolor="#eaeaea"
                    radius="50"
                    stroke="5"
                    iterations="50"
                    animation="easeInOutQuart">
</div>

Any idea?
FYI : I'm using a ControllerAs 'vm'

An option to fit the circle into the parent container

Can we make it? I found that valid use case is responsive layout.

I think it should essentially do viewBox instead of width and height (not sure if there's a reason to use it with the option switched off). I can PR my own fix, once I will merge it with latest commits.

Is there a seek to specific point function?

Hey I'm using this progress bar for a music player and I just wanted to know if there was a seek to specific point function by touching the path?

Feature Request: Text node in center displaying progress as a %

Thanks! Nice directive.

[Feature Request] Partial colors

Would be a fantastic tool for data displays if the stroke could be filled with several different colors. I did notice that you can dynamically change the fill of the entire stroke, but it would be even more amazing if you could have it so that part of it would be a certain color and part of it another.

animation is not showing on switching tabs

its great progress bar, but I am facing an issue with tab interface, its seems animation is not showing on switching tabs.

It only show on hard refresh, I think animation should only fire when the tab content is visible.

I am using simple this in official tab component found here https://angularjs.org/#create-components

Please let me know is there any way I can show animation on tab switch, every tab has its own directive.

<div
max="total"
current="percent"
color="#e84d51"
bgcolor="#623a45"
radius="100"
responsive="true"
animation-delay="500"
stroke="1"
round-progress
></div>

I think if you can add and attribute replay="true" or something it will be nice to control the animation

Iteration Control

Is there an option to start the iteration of the bar on hover?

angular-svg-progressbar

Design very nice, helpful.
It would be nice if a version without being round, making him straight.

Sorry for the bad english.
Thank you.

Add Text

Hi,
i am using it as directive, cannot add the text in the middle.
my code:

## My Text ##

what am i missing?

Provide a linear progress bar

Hey,
do you have any plan to provide a simple linear version of progress bar component?

For the minified version error in developer console

error: invalid value for attribute d="m nan nan a 100 100 0 1 0 103 3"

Fixed from here: http://stackoverflow.com/questions/25923377/svg-invalid-value-for-path

If current > max, then current is set to max

Example:

<div
          round-progress
          max="dailyTarget"
          current="consumption"
          color="{{ (consumption / dailyTarget < 0.75) ? '#F0B840' : '#6C3' }}"
          bgcolor="#eaeaea"
          radius="110"
          stroke="20"
          semi="true"
          rounded="false"
          iterations="50"
          animation="easeInOutQuart">
</div>

$scope.consumption = 5;
$scope.dailyTarget = 3;

$scope.consumption will be set to 3.

I am not exactly sure whether it's a bug or intended behavior. On one hand, it makes sense that current is set to the widget current value even if it's not the original value. However, the widget is responsible for display only and it's not updating or pulling data from anywhere so I'd call it unexpected behavior.

If @crisbeto agrees that it's a bug, I'd like to fix it and submit a PR.

Ability to style colors via CSS?

It'd be great to be able to style the bar via CSS. Currently I had to comment out the css setting code. The reason we do this is because we theme a site via LESS files which derive their colors from LESS variables.

ring.css({
//    "stroke"         : service.resolveColor(options.color),
//    "stroke-width"   : stroke,
    "stroke-linecap" : options.rounded ? "round" : "butt"
});

And the background css as well

background.attr({
    "cx" : radius,
    "cy" : radius,
    "r"  : backgroundSize >= 0 ? backgroundSize : 0
});
// .css({
//     "stroke"       : service.resolveColor(options.bgcolor),
//     "stroke-width" : stroke
// });

Feature request: update on color change

Thank you for a very useful directive!

Feature request: allow the color attribute to be updated dynamically by parent.

Use case: I use the progress bar in a manner similar to your demo (a "task" counter). The color is set to show relative progress. In my use case, there is no need to $watch color as it only changes if the current parameter changes -- just need the latest color value to be used whenever current changes.

I think can be done by changing color to a bi-directional binding and passing it to the path attributes via updateState().

Thanks...

Set start point for rendering.

First of all great directive.

I am using your directive to show how many percentage of some duration completed (some kind of task duration). It is working like a charm. Now I want to design a scheduler by using your directive.In my mind it will be like a clock and user can set start time for task and set duration as well and I want only selected part to be colored. Right now there is no start point options so my question is there any workaround you can suggest or am I missing something?

an example view of how I want to do is something like that. In that example I indicate task will start at 4 and finish at 8...

specify custom width for svg circle

I'm using this as a small dashboard which shows 6 svg circles with different values. I tried to specify custom width to make circles small but I couldn't. Any help please?
something like this in the image:

Animation not working properly in Android Ionic framework

I have added the library to my hybrid app project in Ionic framework to show user rating but it works some time and does not work many times

Restarting the animation

This is more a question than an issue.

I have a use case where I need to re-animate the progress bar to show the user's current progress from zero. The actual current value may or may not have changed, but for the UX, I need to re-display where they are. How would I re-run the animation?

Also, is it possible to programatically decide when to start, stop and restart the animation from my controller? Consider if showing the progress bar is dependent on some part of an app animating - if it exists in the page already, the user won't see the animation.

Angular bracket interpretation not working with "max" or "current" parameters

I am attempting to use your progress bar in a custom directive with which I can pass in values easily to many instances of progress bars. However, using angular's {{variable}} notation is not working as far as I can tell. Here's what I'm doing:

<div round-progress
       max="{{thing}}"
       current="50"
       color="#F96302"
       radius="50"
       stroke="15"
       semi="false"
       rounded="false"
       clockwise="true"
       responsive="false"
       duration="1200"
       animation="easeInOutQuart">
</div>

And I get the following error:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{thing}}] starting at [{thing}}].
http://errors.angularjs.org/1.4.7/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bthing%7D%7D&p4=%7Bthing%7D%7D

Interestingly, I do not get this error when I attempt this syntax with the radius parameter, and passing in {{thing}} as the value there does not result in any errors.

thing is defined on my controller as $scope.thing = 200

Any chance you can help me figure this out? I love your package and would love to keep using it!

When value changed

What about an event or callback to know when counter value changed (1,2,3,4,5,6,...)?
Parent controller will know each time value changing and can use to output current value or calculate percentage or whatever consumer want to display.

Should support provider for default values

I think it would be neat if there was a way to be able to set default values for this on the whole app. At least in our case, it should look identical each time we use it, this would save a lot of time!

Nested progress bars?

I realize this would require an immense amount of re-writing, but do you think it would be possible to have individually-configurable nested progress bars?

Responsive error

I am trying to run this with angular material in one of the flex containers but it doesnt seem to work. Have you have this issue as well?

Progress is not centred exactly and in safari its way off

thanks for this wonderful module, but it not exactly centred vertically. in safari it completely off.

Visiting https://crisbeto.github.io/angular-svg-round-progressbar/ in safari shows it.

In Chrome and Firefox, i see that the styles get assigned are

    top: 50%;
    bottom: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-size: 21px;

setting both top and bottom to 50% leaves the text to be of zero height, may be the css needs to be reconsidered

publish project in the npm registry (make it installable via npm)

CSS issue

I have looked the documentation and I can't find it, how do I put the progress in the middle of the round progress bar as it is on the demo?

Add text in middle

How can I add a text in middle of the cycle saying 50% or any...

Support latest AngularJS stable (v1.3.14)

Consider to support latest version 1.3.14 of angular in bower.json

Timing

Hi Chris,

great control! I want to time the from-to so that for example 0-100 takes 1 second.

You have the iterations attribute, but how can you convert that to a particular time?

Thanks!

Rogier

suggestion: add animation-delay property

Example: animation-delay: 50ms

This could be useful to interact with other page animations.

By the way, great lib!

starting progress halfway through

If i set the max to 900 and the current to 600,
Instead of seeing the circle 1 3rd complete already
it looks like the max sets itself to be the current then it starts from there.

Is this working as intended?

ng-repeat

Will it support ng-repeat?

using the progressbar within ng-repeat

This is also more of a question than an issue.

I'm using the progressbar within an ng-repeat. How can I animate each of the progress bars separately? I'm currently using a function like the one seen here to update the 'current' attribute https://fiddle.jshell.net/c1k13uaa/3/

But by using this method, all of the progress bars share the same 'current' value, and are all animating at the same time.

Set the fill color of the circle.

I could see that there are options to be able to colour the stroke, and the background of the stroke but there isn't any option to fill the circle.
Or have I missed something.

build system

I'd be happy to add build-system support (grunt, gulp, brunch) to the repo, if you are interested.
A trick I have used is to keep just the source files in the repo, then send the minified version & a demo over to the gh-pages branch. That way, you get a kind of CDN, but your repo just has source files.

Size is calculated incorrectly

The size is calculated incorrectly, and excess padding is introduced. Here.

Progress bar displaying incorrectly in Chrome Version 44.0.2403.89 (64-bit)

I am having this issue only in Chrome Version 44.0.2403.89 (64-bit). Is it known issue or a new bug? Thanks

How can I put picture inside the round progressbar?

Is it possible to put picture inside the round progressbar? and I want to know how do you implemente clock example.

How to get text inside the round progress bar circle?

Hi,

I'm quite new to angular, and I'm using your round progress bar in a school project. I'm wondering how to get a label inside the progress circle? I have looked at the source code for your demo, but I still can't seem to get the progress numbers to show up inside the circle, the numbers only show up above the circle. Everything else works, except the placement of the numbers.

<div class="progress-wrapper"  ng-style="{'font-size': getFontSize()}">

        <div class="progress">
            {{ sp.current }} / {{ sp.max }}
        </div>

        <div
        round-progress
        max="sp.max"
        current="sp.current"
        color="#45ccce"
        bgcolor="#eaeaea"
        radius="65"
        stroke="15"
        semi="false"
        rounded="false"
        clockwise="true"
        iterations="75"
        animation="easeInOutQuart">
    </div>
</div>