FREELessons: 8Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 ProgressBar.js

As the name suggests, this plugin can be used to create progress bars, specifically ones that are animated and based on SVGs. Let me show you some examples.

Related Links

2.2 ProgressBar.js

As the name suggests, this plugin can be used to create progress bars, specifically ones that are animated and based on SVGs. Let me show you some examples. I have a simple demo prepared for you here. I have a simple four-cell grid, where each cell has a div with a class of container, and then an additional class of loading-line, circle, semi-circle, and circle-text. And I'm gonna use these four containers to demonstrate four different loaders. In terms of CSS, all I have written so far are some demo styles. But you'll see that with this plugin, the amount of CSS that we have to write is minimal. So let's start by loading the plugin. If we go to this address here, you'll also find it in the link in the lesson notes, you'll see some examples. And you'll also have access to the documentation. To install the plugin, the easiest method is to use npm. And because I'm using CodeKit, I can search for ProgressBar, and it's this one right here, hit Install. And after it's installed, I can go back to my HTML code, I can do script src. And I can go to node_modules, progressbar, dist and I'm gonna choose progressbar.min.js. And now I'll do another script to write my inline JavaScript. So let's start with the most basic example, and that is a line. To create a line, we'll do this. We'll declare a variable, you can call this whatever you want, but I'm gonna call it line = new ProgressBar.Line. Then we're gonna pass in the CSS selector for the element that we wanna use as a container for the SVG. In our case, it's this one, so I'm gonna say .loading-line. And then we can pass in some options. And for options, we can specify things like the color of the progress bar, let's go with something like 09b0ed. What else, we can specify the duration of the animation, let's say 2000. So that's 2,000 milliseconds, or two seconds. And also, we can specify the stroke width, so how thick the line should be. All right, now all that's left to do is to animate it. And I'm gonna say line.animate, and we're gonna pass in a value from 0 to 1. So, if I pass in 1, that means animate at 100%. If I pass in 0.5 it means animate it to 50%. Okay, so let's leave it at 1, and now when I do a refresh, here it is, a nice, simple animation. And as I was saying, if I do 0.5, it's just gonna animate it halfway, let's keep it at 1. Also, if we want to change the overall size of this SVG, we can do that by targeting the container class, and setting a width, And a height. So now you'll see that our line is drawn according to those values. If I wanted to make it longer, all I gotta do is set this width to a bigger value. So now we have a line that goes, [LAUGH] Up to here, so 150 rems. But let's keep it at 15, that should do the trick. So that's how you draw a simple line. Now, what else can you do with this? Well, you can animate a circle. Very simply, you would do this. var circle = new We're gonna pass in loading-circle, which is this element right here, and we're gonna pass in some options. So we can do a different color, and here's something else we can do. We can add a trail, and I'll show you how a trail looks like in just a little bit. We'll set a trail color to, let's say f4f4f4, let's set the duration to two seconds. We can specify the easing that we wanna use for our transition. By default, it's linear, but here, I'm gonna specify to ease in and out. Let's do a stroke width of 3, and a trail with of 1. And I think that should be good enough for now, so let's animate it. Let's do a 0.85, so it's gonna animate 85% of the way. All right, so here is our circle. See this thin gray line? That's the trail, and you can basically add it to the circle, to a semicircle, to a line. It's basically a visual indicator of the entire length of your progress bar. And as expected, this will animate to 85%. And notice the easing has changed as well. This is linear, so it goes in a constant motion across the entire animation. But this one starts slowly, it ramps up, and then it finishes slowly here. Now, the cool thing about this plugin is that you can animate certain properties. So you can start with one color, for example, here. And as you complete the progress bar, you can end up with a different color. Here's how you can do that. Right over here, I can specify a property called from, and I can pass in an object, let's say color, and I'm gonna copy this one. And then I can specify to color, and I can do another one, something like this. And then I'm gonna use the step function, to which I'm gonna pass a state and the actual element. Right, so circle needs to be the same as this. So this is the same as this one. And inside, I'm gonna say circle path, because we're working with SVGs, set attribute. I wanna change the stroke color, and I'm going to change it to, whoops, state.color. All right, so now, you'll see that we start with blue, but we end up with green, see that? That's pretty cool. And you can animate not just colors, but pretty much any CSS attribute. In fact, let's demonstrate that with our third example. We're gonna create a semicircle. So for a semicircle, we'll do this. var semiCircle = new ProgressBar.SemiCircle. We're gonna reference loading-semi-circle, and an object with options. So we're gonna do some very similar things. We're gonna define a color, a trail color, duration, easing, we're gonna change this to bounce, stroke width, trail width. And then, from, we can do something like this, color, we'll go from this value. And also, I can start from a given width, and I can start from a given opacity, let's make this 0. And then to, we're gonna change the color to this one, the width, let's change it to 3, and the opacity to 0. So now, our step function should look something like this. Again, we're gonna specify function state and semiCircle, and we're gonna say semiCircle.path.setAttribute. We're gonna target this stroke, and we're gonna do state.color. And then we're gonna target stroke-width, and we're gonna state.width. And we're gonna target opacity, and we're gonna apply state.opacity. And finally, semiCircle.animate(1). All right, let's see it. Cool, so this is a semicircle. And right now, we're animating three properties. First, opacity, notice it goes from 0 opacity to 1 opacity, or 100%. Second, color, it goes from green to this dark blue. And third, the thickness of the line, it goes from a very thin line to a very thick line. Now, something else you can do is add text to any of these to show the progress, and that's very easy to do. Let me show you how in our fourth demo. So we're gonna say a circle with percentage text. We're gonna say var circleText = new And we're gonna pass in loading-circle-text, which is our fourth div here, and a couple of options. And then let's also circleText, let's animate it to 100%. And for the options, I just added color, duration, easing, and stroke-width, and then I'm gonna add a step function. And I'm going to say this var value = math.round(circleText.value()) * 100. So we're just getting a progress number from the function, and we're just rounding it and multiplying it by 100. And then we can say if, That value is 0, then I can say circleText.setText to nothing, basically. else, I can say circleText.setText to value plus the percentage sign. So, let's take a look, and here it is. It counts up from 1% all the way to 100%. Of course, if I had the end value for the animation set lower, it's gonna go to just 86%, the same amount that I said here. Now, what about styling this text? Well, by default, this text receives the following styling. Position absolute, left 50%, top the same, resets padding and margin, and does a transform of -50, -50 to position it exactly in the center. And also, it gets a different color. But what if you wanna style it yourself? Well, you can do that by setting another property here, text, style = null. And by doing that, all of the default styling that was applied to this text is removed. All you have to do now is add your own styling. So we're gonna say loading-circle-text, let's do a position relative because the text itself needs to be positioned absolutely. And the text by default has a class name of ProgressBarText, this can also be changed from the options. And then you can do a color, you can set the position, top 50%, left 50%, if you want to center it, of course. If you don't want to center it, then you can place it wherever you want. And we're gonna do a translate3d here, -50, -50, and 0. And also, let's reset margin and padding, and let's also do font-style italic. So now with these new changes, this is what our loading text looks like. Now, if you go to the official page for ProgressBar.js, you can see a bunch of animations or progress bars created with this plugin. You can also see this this custom one here that uses an SVG path to create a progress bar. And you can also find links to the documentation. And in the documentation, you'll find all the necessary information on configuration, on the type of parameters you can use, you can see them laid out right here. And by using these, you can really tailor this plugin to your own liking. So go ahead and check out the documentation and the official demos. And that's ProgressBar.js, a very handy plugin for creating animated SVG progress bars. Now let's move on and learn about a plugin called Cleave.js. This is used for formatting form inputs, more about it in the next lesson.

Back to the top