Angular Progress Bars

Progress bar example using HTML-DIV-elements

The first approach works by placing two DIV-elements inside each other.

The outer one represents the outer border of our progress bar. Its width defines the width of the bar when the progress is at 100%. This DIV is typically transparent.

The inner DIV on the other hand displays the current progress. Its width depends on the current progress and its background-color represents the color of the progress bar.

To make this work with angular, we create a new progress bar component. You can do so by using the angular-cli:

 ng generate component bar

or much shorter:

 ng g c bar

Inputs

Our progress bar component will have just one input. This will be the current progress in percent represented by a number (100 = 100%).

All we need to do is to add a field to our new component that is decorated by the @Input decorator. Let’s call that field “value” to be consistent with other HTML-elements like the input-element.

import { Component, Input } from '@angular/core'
 
@Component({
  selector: 'app-bar',
  templateUrl: './bar.component.html',
  styleUrls: ['./bar.component.css'],
})
export class BarComponent {
  @Input() value: number = 0
}

We also set its default value to 0, just in case.

Template

Our template will contain only one DIV, which is the inner DIV mentioned before. The outer DIV will be the angular host element. This is just another DIV that angular creates for every component anyways.

We can save a DIV here and just use this host element. We later style this element by using the :host selector in our style-sheets.

<div [ngStyle]="{'width': value + '%'}" class="bar"></div>

To show our progress bar with the right width, we define its style “width” at run time using the ngStyle directive. For our bar to show the current progress, its width has to be the value-input of our component.

Style Sheets

All that’s left now are some style sheets (CSS). We have to implement the “bar” class we assigned erlier

.bar {
  background-color: blueviolet;
  height: 100%;
}

and add some properties to our host element:

:host {
  display: block;
  height: 100%;
}

Progress bar example using SVGs

Using SVGs to create a progress bar is quite similar to using DIVs. The main difference might be, that we do not need to use any style sheets at all. We can control the SVG with its attributes instead.

Let’s create a new component and cal it “svgbar”.

 ng generate component svgbar

The TypeScript part of this component looks exactly like the previous one:

import { Component, Input } from '@angular/core'
 
@Component({
  selector: 'app-svgbar',
  templateUrl: './svgbar.component.html',
  styleUrls: ['./svgbar.component.css'],
})
export class SvgbarComponent {
  @Input() value: number = 0
}

Creating the SVG

When creating a SVG, the first thing we need to do, is to create the svg-tag. It is the wrapper of the svg-element.

<svg></svg>

Next, we define the view box. The view box spans up a local coordinate system we use when we want to set positions or dimensions of elements inside of the SVG.

We also use this attribute to define the aspect ration of our drawings.

<svg viewBox="0, 0, 100, 10"></svg>

Using a rectangle as progress bar

In this case we are using a view box starting at 0,0 and with a width of 100,10.

Now we need to insert the actual progress bar. To do that, we are using the rect (rectangle) element and define its width to be our “value”. Because our view box has a width of 100 this represents a percentage.

<svg viewBox="0, 0, 100, 10">
  <rect [attr.width]="value" height="10" fill="blueviolet"></rect>
</svg>

We set the height of the bar to 10, which is 100% of the available height. Also we define the color our rectangle is filled with. You can choose any color here.

That’s already it.

Calculating dasharray and dashoffset

The logic of our component looks exactly like the components we defined before.

Additional, we have to calculate the dasharray and the dashoffset value this time.

import { Component, Input, SimpleChanges } from '@angular/core'
 
@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css'],
})
export class SpinnerComponent {
  @Input() value: number = 0
 
  public circumference: number = 2 * Math.PI * 47
  public strokeDashoffset: number = 0
}

The circumference, which will be our dasharray value, is defined as 2 times pi multiplied by the radius of the circle.

As our default value is zero, the default stroke-dashoffset is zero, as well.

Reacting to changed values

You might have noticed, that stroke-dashoffset has to be calculated every time the value (progress) changes.

To do that, we are implementing the ngOnChanges callback in our component. This way, we are notified, when an input of the component changes its value.

Inside of the callback we get a SimpleChanges object. This contains all changes in a key/values style, where the key is the name of our input (value).

Afterward, we just calculate the new offset.

import { Component, Input, SimpleChanges } from '@angular/core'
 
@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css'],
})
export class SpinnerComponent {
  @Input() value: number = 0
 
  public circumference: number = 2 * Math.PI * 47
  public strokeDashoffset: number = 0
 
  ngOnChanges(changes: SimpleChanges) {
    if (changes['value']) {
      this.onPercentageChanged(changes['value'].currentValue)
    }
  }
 
  onPercentageChanged(val: number) {
    const offset = this.circumference - (val / 100) * this.circumference
    this.strokeDashoffset = offset
  }
}

The circumference of the circle always stays the same.

Creating the SVG

Inside of the components template we are defining the corresponding SVG once again.

The main difference her is, that we are using a circle element instead of a rectangle. The circle needs to know its origin (cx, cy) and its radius (r).

Also, we are binding our components’ fields to the style attributes “style.strokeDasharray” and “style.strokeDashoffset”. Again, we have to use the prefix to prevent angular from throwing an error.

<svg viewBox="0, 0, 100, 100">
  <circle
    class="progress-circle"
    stroke-width="6"
    [style.strokeDasharray]="circumference"
    [style.strokeDashoffset]="strokeDashoffset"
    fill="transparent"
    stroke="blueviolet"
    r="47"
    cx="50"
    cy="50"
  />
  <text x="50" y="50" class="text" text-anchor="middle">{{(value) + '%'}}</text>
</svg>

We also add a little text, that is placed in the center of the circle.

Adding style sheets

As you can see, we have referenced some classes in our template.

The most important thing we have to do here is to rotate the circle by 90 degrees, otherwise our progress is not starting at the top. Because elements are always rotated with the top-left corner as origin , we need to transform that origin to be in the middle of our circle.

.progress-circle {
  transition: stroke-dashoffset 0.3s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
 
.text {
  font-family: 'Roboto';
}

We also add a little transition and set the font to Roboto to make it look a little bit nicer.