Progressbar.js Examples

[Erwin Beatz]

Nothingon the web happens instantly. The only difference is in the time it takes for a process to complete. Some processes can happen in a few milliseconds, while others can take up to several seconds or minutes. For example, you might be editing a very large image uploaded by your users, and this process can take some time. In such cases, it is a good idea to let the visitors know that the website is not stuck somewhere but is actually working on your image and making some progress.

One of the most common ways to show readers how much a process has progressed is to use progress bars. In this tutorial, you will learn how to use the ProgressBar.js library to create different progress bars with simple and complex shapes.

Once you have included the library in your project, creating a progress bar using this library is easy. ProgressBar.js is supported in all major browsers, including IE9+, which means that you can use it in any website you are creating with confidence. You can get the latest version of the library from GitHub or directly use a CDN link to add it to your project.

To avoid any unexpected behavior, please make sure that the container of the progress bar has the same aspect ratio as the progress bar. In the case of a circle, the aspect ratio of the container should be 1:1 because the width will be equal to the height. In the case of a semicircle, the aspect ratio of the container should be 2:1 because the width will be double the height. Similarly, in the case of a simple line, the container should have an aspect ratio of 100:strokeWidth for the line.

When creating progress bars with a line, circle, or semicircle, you can simply use the ProgressBar.Shape() method to create the progress bar. In this case, the Shape can be a Circle, Line, or SemiCircle. You can pass two parameters to the Shape() method. The first parameter is a selector or DOM node to identify the container of the progress bar. The second parameter is an object with key-value pairs which determine the appearance of the progress bar.

You can specify the color of the progress bar using the color property. Any progress bar that you create will have a dark gray color by default. The thickness of the progress bar can be specified using the strokeWidth property. You should keep in mind that the width here is not in pixels but in terms of a percentage of the canvas size. For instance, if the canvas is 200px wide, a strokeWidth value of 5 will create a line which is 10px thick.

Besides the main progress bar, the library also allows you to draw a trailing line which will show readers the path on which the progress bar will move. The color of the trail line can be specified using the trailColor property, and its width can be specified using the trailWidth property. Just like strokeWidth, the trailWidth property also computes the width in percentage terms.

The total time taken by the progress bar to go from its initial state to its final state can be specified using the duration property. By default, a progress bar will complete its animation in 800 milliseconds.

You can use the easing property to specify how a progress bar should move during the animation. All progress bars will move with a linear speed by default. To make the animation more appealing, you can set this value to something else like easeIn, easeOut, easeInOut, or bounce.

After specifying the initial parameter values, you can animate the progress bars using the animate() method. This parameter accepts three parameters. The first parameter is the amount up to which you want to animate the progress line. The two other parameters are optional. The second parameter can be used to override any animation property values that you set during initialization. The third parameter is a callback function to do something else once the animation ends.

The only thing that changes with the animation of the progress bars in the above example is their length. However, ProgressBar.js also allows you to change other physical attributes like the width and color of the stroking line. In such cases, you will have to specify the initial values for the progress bar inside the from parameter and the final values inside the to parameter when initializing the progress bars.

You can also tell the library to create an accompanying text element with the progress bar to show some textual information to your users. The text can be anything from a static value to a numerical value indicating the progress of the animation. The text parameter will accept an object as its value.

This object can have a value parameter to specify the initial text to be shown inside the element. You can also provide a class name to be added to the text element using the className parameter. If you want to apply some inline styles to the text element, you can specify them all as a value of the style parameter. All the default styles can be removed by setting the value of style to null. It is important to remember that the default values only apply if you have not set a custom value for any CSS property inside style.

The value inside the text element will stay the same during the whole animation if you don't update it yourself. Luckily, ProgressBar.js also provides a step parameter which can be used to define a function to be called with each animation step. Since this function will be called multiple times each second, you need to be careful with its use and keep the calculations inside it simple.

Sometimes, you might want to create progress bars with different shapes that match the overall theme of your website. ProgressBar.js allows you to create progress bars with custom shapes using the Path() method. This method works like Shape() but provides fewer parameters to customize the progress bar animation. You can still provide a duration and easing value for the animation. If you want to animate the color and width of the stroke used for drawing the custom path, you can do so inside the from and to parameters.

The library does not provide any way to draw a trail for the custom path, as it did for simple lines and circles. However, you can create the trail yourself fairly easily. In the following example, I have created a triangular progress bar using the Path() method.

You might have noticed that I created two different path elements. The first path has a light gray color which acts like the trail we saw with simple progress bars in the previous section. The second path is the one that we animate with our code. We have given it an id which is used to identify it in the JavaScript code below.

Progress bars are meant to indicate the progress of a process to users. You can use them for a variety of tasks like image upload, indicating password strength, editing images, processing a large table, etc.

In this section, we will create a simple form with a textarea element to input some text. We are supposed to write at least 100 characters inside it, and the progress bar will gradually turn from red to green. The markup will look something like this:

We use the from and to parameters to specify that the progress bar should originally be red and ultimately turn green. Keep in mind that simply setting the values for from and to won't result in any color change. The change in the color of the progress bar is accomplished with the use of the step parameter, where we set the value of the stroke attribute.

Now, let's write some code to attach a keydown event listener to the textarea element. We will get the length of the text inside the element and divide it by the minimum length that we want the text to be. In our case, we just want to count till 100 characters, so we divide by 100.

As you saw in this tutorial, ProgressBar.js allows you to easily create different kinds of progress bars with ease. It also gives you the option to animate different attributes of the progress bar like its width and color. Look at other progress bar examples for reference.

Not only that, but you can also use this library to change the value of an accompanying text element in order to show the progress in textual form. This tutorial covers everything that you need to know to create simple progress bars. However, you can go through the documentation to learn more about the library.

Thankfully, there are many free JavaScript plugins available that allow you to customize the look and feel of your progress bars. These plugins offer a variety of extra features, such as animations and more advanced design options, to help make your progress bars more engaging and visually appealing.

Check out the homepage for some examples with bars embedded in the page along with a top loading bar fixed to the full browser width. It can run on just a single function call which makes this perfect for non-JS coders as well as devs who staunchly oppose using jQuery.

The majority of progress bars fill up a percentage or a number counter. But progressStep is different. This jQuery plugin lets you develop a breadcrumb progress bar where the user works through different steps in a pre-defined process.

In questo articolo vediamo come integrare un componente nel motore grafico RD3 di tipo progressbar utilizzando Progress.js.

In allegato trovate anche il progetto di esempio per il motore grafico FLUID.

Vogliamo ottenere questo risultato:

Nella custom stata copiata la libreria progressbar.js scaricata dal sito di riferimento ed stato creato un file javascript IDProgressBar.js contenente il codice della nostra classe wrapper.

Nota: Non abbiamo modificato i file Desktop.htm e Desktop_sm.htm perch il file IDProgressBar.js viene automaticamente caricato mentre il file progressbar.js viene caricato, all'apertura della videata, dalla classe wrapper IDProgressBar.js.

E' stato definito il metodo Init nel quale viene caricato il file javacript progressbar.js e viene invocato subito in modo da caricare il javascript il prima possibile (vedi chiamata IDProgressBar.Init();.Per essere sicuri di caricare il file una volta sola stata usata la variabile statica IDProgressBar.inited. Se ci sono pi istanze a video, infatti, non necessario che tutte carichino il file progressbar.js.

3a8082e126