And the way to embody it in Angular, React, Svelte, or Vue apps
Not too long ago, I’ve been requested to create circle progress bars. First, it was about monitoring the progress of the implementation of a brand new design. Then, about making a naked new element indicating completion listing standing.
I didn’t need to give an opportunity to laziness and check out by myself. I used to be already conscious of the tip utilizing conic-gradient with solely CSS and I needed to offer it a attempt.
My objective was additionally to eliminate the usage of a third-party library which might improve the dimensions of the output bundle and make the choices extra restrictive.
Thus, on this article, you’ll learn to implement a Circle Progress Bar by yourself in 2 alternative ways:
- The primary method will use pure CSS with
conic-gradientoperate, - The second will make use of SVG and CSS.
Within the closing half, you’ll see the way to combine such charts in initiatives utilizing the JavaScript Frameworks: Angular, React, Svelte, and Vue 3.
Let’s begin with the conic-gradient choice, right here simply fundamental CSS information are required.
The idea
To construct a circle progress bar utilizing solely CSS, we’ll use the conic-gradient function. In case you’re not conversant in gradients in CSS, you may see a fast comparability slightly below:
As gradients paints the entire container, we’ll want to make use of 3 totally different gradients:
- One for the finished part
- One for the remaining part
- One to masks the middle of the “disc”
The implementation
A radial-gradient might be utilized to the inside part: it permits so as to add some transparency for the bar (the progress half) and use the background colour for the “gap”.
The outer part (progress and remaining bars) consists of conic-gradient with particular angles.
As we’re coping with angles, we should translate a progress worth (between 0 and 1) into an angle (between 0 and 360). To take action, it’s fundamental Arithmetic: 360 * progress.
// For a progress of 30%, then 0.3
angle = 360deg * 0.3 = 120deg
Professionals and Cons
The primary advantage of this feature is its simplicity. You simply must grasp the CSS operate and tweak the rotation angles (for those who intend to make use of colour gradients). The method to show a progress worth to an angle is straight-forward. Speaking about browser compatibility, conic gradients are properly supported, besides from IE (extra information here).
Alternatively, there are downsides: the choices to customise the chart are restricted. For instance, we are able to’t tweak its form. Furthermore, and possibly crucial, the opening’s background colour is specified explicitly, which isn’t very handy.
The primary choice was a chunk of cake however too restrictive. Because of its quite a few options, SVG affords many properties that can allow us to customise the rendering of our circle progress bar.
The idea
As soon as once more, it’s all about 2 circles which are overlapping one on prime of the opposite. Nonetheless, right here we are able to handle 2 attributes correct to SVG: stroke-width and stroke-dashoffset.
The primary one is kind of express and specifies the width of the bar. In the meantime, stroke-dashoffset defines an arc to be drawn with a price between 0 and 100.
Moreover, you can also make the border of the bar rounded by making use of
stroke-linecap: rounded.
The implementation
Earlier than deep diving into the code, some fundamental information with SVGs.
The SVG markup makes use of a viewBox attribute to carry the content material. You have to outline its origin and dimensions. It follows the x y w h semantic:
It implies that in keeping with the stroke width you’ll use, the origin and the size will have to be tweaked once more.
Then, the start of the progress bar doesn’t match the regular start line. Rotation is required with remodel: rotate(-90deg).
Few components have to be famous:
strokedefines the colour of the<circle>stroke-dasharrayproperty specifies the sample to make use of to stipulate shapes (right here we wish 100%)
As soon as once more, a method have to be utilized to transform a decimal proportion into the correct progress worth for the stroke dashoffset:
// For a progress of 70%, then 0.7
stroke-dashoffset = 100 - (0.7 * 100) = 30
Going additional with the SVG method…
SVG affords many prospects, your creativeness is your solely restrict.
Possibly you jumped into this text for the semi-circular progress bar on the hero picture. The codepen under demonstrates the way to take care of linear gradient, form rendering, drop-shadows and stroke dash-arrays.
Benefits and Drawbacks
The benefits are quite a few. Initially, the SVG choices offers you plenty of flexibility to customise your element.
It’s the greatest method when it offers with responsiveness and browsers compatibility assist as you may take a look at with CanIUse.
Nonetheless this customizability comes with a price: time and efforts. Typically, you’ll want a characteristic that it’s tough to develop. On this case, utilizing a third-party library is an effective guess, quid of the dependency and the dimensions of the seller.
For all these causes, I all the time advocate to mitigate the necessities and the simplest resolution to implement.
Now it’s time to show this Circle Progress Bar snippet right into a concrete and related element. Let’s see how one can combine it in a venture.
At this level, your app renders a flowery and brand-new circle progress bar however it’s not very dynamic although… That you must “inject” actual knowledge and never just a few static values.
Angular
Mainly, probably the most handy approach to plug a dynamic worth to the circle progress bar is utilizing a CSS variable.
Angular framework permits us to take action utilizing the native factor of the element, as you may see under:
React
Utilizing Styled Parts, it’s very simple with React to implement the CircleProgressBar element.
Another choice is to make use of CSS variables. For this, I allow you to deep dive into the article from Josh W. Comeau:
Svelte
When it comes with Svelte, it’s spectacular to see how slightly little bit of code can produce a lot far more. As soon as, once more CSS variable is the important thing:
Yow will discover the associated playground down under:
Vue 3
The Vue model will use CSS customized property as soon as once more. We’ll bind a dynamic worth to a CSS property with v-bind as described here.
As you’ll have seen, creating your individual circle progress bar isn’t that sophisticated, only a little bit of CSS and (optionally) SVG. In fact, these options gained’t serve all of your necessities ; however now you can contemplate doing it by yourself.
As engineers, it’s necessary that we contemplate all of the choices and take a step again: is it related so as to add a dependency? Or possibly the use case could be very particular and straightforward to implement…
As a matter of truth, CSS and SVG supply plenty of prospects and thus, circle progress bar is only one instance amongst many others.
