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.

src/app/bar/bar.component.html

<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

src/app/bar/bar.component.css

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

and add some properties to our host element:

src/app/bar/bar.component.css

: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:

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.

src/app/svgbar/svgbar.component.html

<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.

src/app/svgbar/svgbar.component.html

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

Note, that the "viewBox" attribute has to be spelled with a capital b!

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.

Note, that because we are using an angular data-binding for our width, we need to use "attr.width" instead of just "width". Otherwise angular will trow an error.

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.

How to create a circular progress spinner

Creating a circular progress bar is not more difficult than creating a horizontal one.

As always, we are going to create a new component for this:

ng generate component spinner

To create the progress bar effect, we need to use a little trick. We are going to use a circle element instead of a rectangle this time. But with a circle we can't display the progress by just adjusting the width.

In our case, we will use the attributes to display only a percentage of the full circle.

We do so by setting the stroke-dasharray to the circumference of our circle. That way, we have a dotted line that has dashes and gaps of the circumference of our circle.

By just setting the stroke-dasharray attribute we still end up with a full circle. What does the trick is the stroke-dashoffset attribute. With this attribute we define an offset of our dashes and gaps. This way we can align the dash and the gap, which both have the length of the circumference of our circle, in a way that only a percentage of the stroke of the circle is visible.

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.

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.

Stay up to date about what is going on in the web-dev community and on this site.

Special offers

Get notified about special offers of our own, or our partners' products. Don't worry, we won't spam your inbox!

Your Email Address

Yes, I want to subscribe to the email newsletter about new articles, products and special offers.

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you
receive from us. For more information about our privacy practices, email performance mesurements, logging of the registration
process and your rights, please take a look at our
Privacy Policy

Join the Newsletter

Never miss a post

Receive updates when a new post is published.

Stay in touch

Stay up to date about what is going on in the web-dev community and on this site.

Special offers

Get notified about special offers of our own, or our partners' products. Don't worry, we won't spam your inbox!

Your Email Address

Yes, I want to subscribe to the email newsletter about new articles, products and special offers.

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you
receive from us. For more information about our privacy practices, email performance mesurements, logging of the registration
process and your rights, please take a look at our
Privacy Policy