Nothing on the net occurs immediately. The one distinction is within the time it takes for a course of to finish. Some processes can occur in a couple of milliseconds, whereas others can take as much as a number of seconds or minutes. For instance, you may be enhancing a really giant picture uploaded by your customers, and this course of can take a while. In such circumstances, it’s a good suggestion to let the guests know that the web site just isn’t caught someplace however it’s truly working in your picture and making some progress.
One of the widespread methods to indicate readers how a lot a course of has progressed is to make use of progress bars. On this tutorial, you’ll learn to use the ProgressBar.js library to create totally different progress bars with easy and complicated shapes.
Making a Fundamental Progress Bar
Upon getting included the library in your mission, making a progress bar utilizing this library is simple. ProgressBar.js is supported in all main browsers, together with IE9+, which implies that you need to use it in any web site you’re creating with confidence. You may get the most recent model of the library from GitHub or straight use a CDN hyperlink so as to add it in your mission.
To keep away from any sudden conduct, please guarantee that the container of the progress bar has the identical side ratio because the progress bar. Within the case of a circle, the side ratio of the container must be 1:1 as a result of the width shall be equal to the peak. Within the case of a semicircle, the side ratio of the container must be 2:1 as a result of the width shall be double the peak. Equally, within the case of a easy line, the container ought to have a side ratio of 100:strokeWidth for the road.
When creating progress bars with a line, circle, or semicircle, you may merely use the ProgressBar.Form() methodology to create the progress bar. On this case, the Form is usually a Circle, Line, or SemiCircle. You may go two parameters to the Form() methodology. The primary parameter is a selector or DOM node to determine the container of the progress bar. The second parameter is an object with key-value pairs which decide the looks of the progress bar.
You may specify the colour of the progress bar utilizing the shade property. Any progress bar that you simply create could have a darkish grey shade by default. The thickness of the progress bar could be specified utilizing the strokeWidth property. It is best to take into account that the width right here just isn’t in pixels however by way of a share of the canvas dimension. For example, if the canvas is 200px broad, a strokeWidth worth of 5 will create a line which is 10px thick.
Moreover the principle progress bar, the library additionally permits you to draw a trailing line which can present readers the trail on which the progress bar will transfer. The colour of the path line could be specified utilizing the trailColor property, and its width could be specified utilizing the trailWidth property. Similar to strokeWidth, the trailWidth property additionally computes the width in share phrases.
The whole time taken by the progress bar to go from its preliminary state to its closing state could be specified utilizing the length property. By default, a progress bar will full its animation in 800 milliseconds.
You should utilize the easing property to specify how a progress bar ought to transfer through the animation. All progress bars will transfer with a linear pace by default. To make the animation extra interesting, you may set this worth to one thing else like easeIn, easeOut, easeInOut, or bounce.
After specifying the preliminary parameter values, you may animate the progress bars utilizing the animate() methodology. This parameter accepts three parameters. The primary parameter is the quantity as much as which you wish to animate the progress line. The 2 different parameters are optionally available. The second parameter can be utilized to override any animation property values that you simply set throughout initialization. The third parameter is a callback perform to do one thing else as soon as the animation ends.
Within the following instance, I’ve created three totally different progress bars utilizing all of the properties we’ve got mentioned to this point.
var lineBar = new ProgressBar.Line('#line-container', {
shade: 'orange',
strokeWidth: 2,
trailWidth: 0.5
});
lineBar.animate(1, {
length: 1000
});
var circleBar = new ProgressBar.Circle('#circle-container', {
shade: 'white',
strokeWidth: 2,
trailWidth: 10,
trailColor: 'black',
easing: 'easeInOut'
});
circleBar.animate(0.75, {
length: 1500
});
var semiBar = new ProgressBar.SemiCircle('#semi-container', {
shade: 'violet',
strokeWidth: 2,
trailWidth: 0.5,
easing: 'bounce'
});
semiBar.animate(1, {
length: 3000
});
Animating Textual content Values With the Progress Bar
The one factor that modifications with the animation of the progress bars within the above instance is their size. Nonetheless, ProgressBar.js additionally permits you to change different bodily attributes just like the width and shade of the stroking line. In such circumstances, you’ll have to specify the preliminary values for the progress bar contained in the from parameter and the ultimate values contained in the to parameter when initializing the progress bars.
You can too inform the library to create an accompanying textual content factor with the progress bar to indicate some textual data to your customers. The textual content could be something from a static worth to a numerical worth indicating the progress of the animation. The textual content parameter will settle for an object as its worth.
This object can have a worth parameter to specify the preliminary textual content to be proven contained in the factor. You can too present a category identify to be added to the textual content factor utilizing the className parameter. If you wish to apply some inline types to the textual content factor, you may specify all of them as a worth of the type parameter. All of the default types could be eliminated by setting the worth of type to null. You will need to do not forget that the default values solely apply you probably have not set a customized worth for any CSS property inside type.
The worth contained in the textual content factor will keep the identical throughout the entire animation in case you do not replace it your self. Fortunately, ProgressBar.js additionally gives a step parameter which can be utilized to outline a perform to be referred to as with every animation step. Since this perform shall be referred to as a number of occasions every second, that you must watch out with its use and maintain the calculations inside it easy.
var lineBar = new ProgressBar.Line("#line-container", {
strokeWidth: 4,
trailWidth: 0.5,
from: { shade: "#FF9900" },
to: { shade: "#00FF99" },
textual content: {
worth: '0',
className: 'progress-text',
type: {
shade: 'black',
place: 'absolute',
prime: '-30px',
padding: 0,
margin: 0,
remodel: null
}
},
step: (state, form) => {
form.path.setAttribute("stroke", state.shade);
form.setText(Math.spherical(form.worth() * 100) + ' %');
}
});
lineBar.animate(1, {
length: 4000
});
var circleBar = new ProgressBar.Circle("#circle-container", {
shade: "white",
strokeWidth: 2,
trailWidth: 25,
trailColor: "black",
easing: "easeInOut",
from: { shade: "#FF9900", width: 1 },
to: { shade: "#FF0099", width: 25 },
textual content: {
worth: '0',
className: 'progress-text',
type: {
shade: 'black',
place: 'absolute',
prime: '45%',
left: '42%',
padding: 0,
margin: 0,
remodel: null
}
},
step: (state, form) => {
form.path.setAttribute("stroke", state.shade);
form.path.setAttribute("stroke-width", state.width);
form.setText(Math.spherical(form.worth() * 100) + ' %');
}
});
circleBar.animate(0.75, {
length: 1500
});
var semiBar = new ProgressBar.SemiCircle("#semi-container", {
shade: "violet",
strokeWidth: 2,
trailWidth: 8,
trailColor: "black",
easing: "bounce",
from: { shade: "#FF0099", width: 1 },
to: { shade: "#FF9900", width: 2 },
textual content: {
worth: '0',
className: 'progress-text',
type: {
shade: 'black',
place: 'absolute',
prime: '45%',
left: '50%',
padding: 0,
margin: 0,
remodel: null
}
},
step: (state, form) => {
form.path.setAttribute("stroke", state.shade);
form.path.setAttribute("stroke-width", state.width);
form.setText(Math.spherical(form.worth() * 100) + ' %');
}
});
semiBar.animate(0.75, {
length: 2000
});
Creating Progress Bars With Customized Shapes
Typically, you may wish to create progress bars with totally different shapes that match the general theme of your web site. ProgressBar.js permits you to create progress bars with customized shapes utilizing the Path() methodology. This methodology works like Form() however gives fewer parameters to customise the progress bar animation. You may nonetheless present a length and easing worth for the animation. If you wish to animate the colour and width of the stroke used for drawing the customized path, you are able to do so contained in the from and to parameters.
The library doesn’t present any means to attract a path for the customized path, because it did for easy strains and circles. Nonetheless, you may create the path your self pretty simply. Within the following instance, I’ve created a triangular progress bar utilizing the Path() methodology.
Earlier than writing the JavaScript code, we should outline our customized SVG path in HTML. Right here is the code I used to create a easy triangle:
<svg xmlns="https://www.w3.org/2000/svg" model="1.1" x="0" y="0" width="300" peak="300" viewBox="0 0 300 300"> <path d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="#ddd" stroke-width="1"/> <path id="triangle" d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="blue" stroke-width="5"/> </svg>
You might need seen that I created two totally different path components. The primary path has a light-weight grey shade which acts just like the path we noticed with easy progress bars within the earlier part. The second path is the one which we animate with our code. We now have given it an id which is used to determine it within the JavaScript code beneath.
var path = new ProgressBar.Path("#triangle", {
length: 6000,
from: {
shade: "#ff0000",
width: 2
},
to: {
shade: "#0099ff",
width: 10
},
strokeWidth: 4,
easing: "easeInOut",
step: (state, form) => {
form.path.setAttribute("stroke", state.shade);
form.path.setAttribute("stroke-width", state.width);
}
});
path.animate(1);
Utilizing Progress Bars on Webpages
Progress bars are supposed to point out the progress of a course of to customers. You should utilize them for a wide range of duties like picture add, indicating password power, enhancing pictures, processing a big desk and so on.
On this part, we’ll create a easy kind with a textarea factor to enter some textual content. We’re supposed to write down no less than 100 characters inside it and the progress bar will regularly flip from crimson to inexperienced. The markup will look one thing like this:
<kind motion="" class="form-example">
<textarea identify="reply" class="reply" placeholder="Maintain writing until you're at 100 characters..."></textarea>
</kind>
<div id="circle-container"></div>
Nothing fancy right here, only a easy kind and a div that may comprise our round progress bar.
Lets start by creating an occasion of our round progress bar with the next code:
const circleBar = new ProgressBar.Circle("#circle-container", {
from: {shade: "#ff0000"},
to: {shade: "#008800"},
strokeWidth: 8,
trailWidth: 1,
trailColor: "#666",
easing: "easeInOut",
step: (state, form) => {
form.path.setAttribute("stroke", state.shade);
}
});
We use the from and to parameters to specify that the progress bar ought to initially be crimson and in the end flip inexperienced. Understand that merely setting the values for from and to will not lead to any shade change. The change within the shade of the progress bar is achieved with using step parameter the place we set the worth of stroke attribute.
Now, lets write some code to connect a keydown occasion listener to the textarea factor. We are going to get the size of textual content content material contained in the factor and divide it by the minimal size that we wish the textual content content material to be. In our case, we simply wish to depend until 100 characters. So, we divide by 100.
Lastly, we use the animate() methodology and go the worth of progress to it together with animation length.
const textArea = doc.querySelector('kind textarea');
textArea.addEventListener('keydown', (occasion) => {
let content material = occasion.goal.worth;
const min_length = 100;
let progress = content material.size/min_length;
if(progress > 1) {
progress = 1;
}
circleBar.animate(progress, {
length: 50
});
});
This completes our integration of the progress bar with the textarea factor. You may mess around with the code inside the next demo:
For observe, it’s best to take into account integrating a progress bar with a easy password checker.
Closing Ideas
As you noticed on this tutorial, ProgressBar.js permits you to simply create totally different sorts of progress bars with ease. It additionally offers you the choice to animate totally different attributes of the progress bar like its width and shade.
Not solely that, however you can too use this library to vary the worth of an accompanying textual content factor with a view to present the progress in textual kind. This tutorial covers every part that that you must know to create easy progress bars. Nonetheless, you may undergo the documentation to be taught extra in regards to the library.
If there may be something that you prefer to me to make clear on this tutorial, be at liberty to let me know within the feedback.
Publish thumbnail created with OpenAI DALL-E.
