This page will walk you through an example of adding the Fluid Progress component to an HTML file.
This tutorial assumes that:
- you are familiar with what the Progress component is and does
- now you just want to know how to add it to your file.
Tutorial: How to Use the Progress
This tutorial shows one example of how Progress might be incorporated into a widget, component, or application. Fluid Progress is designed to be very flexible and customizable. There are many ways to display progress. Please use our example as a jumping off point for your own creative use of Fluid Progress.
Let's assume that you have an application that does something – something that you know will take a certain amount of time, or has some other clear, quantifiable end-point or goal, and that the amount of progress can be measured as a percentage of that goal. Perhaps the number of bytes of a file uploaded, an amount of time passed, a percentage of numbers crunched, etc. You want to communicate to your users how far along that process is and when the process will be complete. This is what Fluid Progress is for.
This example "pops-up" a progress display as a process begins and hides the progress bar when the process is over.
There are four basic steps to adding the Progress to your application:
- Setup: Download and install the Fluid Infusion library
- Step 1: Prepare your markup
- Step 2: Write the script
- Step 3: Add the script to your HTML
The rest of this tutorial will explain each of these steps in detail.
Setup: Download and install the Fluid Infusion library
- Download a copy of the Fluid Infusion component library from:
You only really need the "Minified deployment package," but if you want to actually look at the code, you should download the "Source package."
- Unpack the zip file you just downloaded, and place the resulting folder somewhere convenient for your development purposes.
The folder will have the release number in its name (e.g. infusion-1.4/). The rest of this tutorial will use infusion-1.4 in its examples, but if you downloaded a different version, you'll have to adjust.
Step 1: Prepare your markup
We'll start with an HTML file called
pop-up-progress.html. This page contains one thing, a big button that says,
Now we need to add the markup that describes the Progress component.
The most basic Progress component is made up of a bar and an indicator. You can include other markup in your Progress but you must include these two elements. (Although the bar does not have to be visible.)
Our Tutorial example contains a few other elements.
The HTML looks like this:
In the code above, the indicator element is contained within the progress bar element. While this is typical, it is not required. The indicator and the progress bar can be marked up quite independently of each other. The only requirement is that there be both an indicator element and a bar element as the width of the progress bar determines the final, 100%, width for the indicator.
Step 2: Write the script
For this tutorial, we'll assume that you're putting your Progress initialization and control code into a file named
In your file, write a function to initialize the Progress component:
The code above is so simple because in this example we chose to use the defaults already defined for the Progress component. All we had to do is tell Progress where to find all it's parts – inside a container with an id of
main. Progress knows to look for a
displayElement with a class of
flc-progress, and a
progressBar with a class of
Let's make a small change to the default options. Let's change the default
speed for updating the Progress indicator element. We'll make it run a bit slower and a bit smoother than the default. Like so:
Finally we need to wire up our "do something" button to call our
A full description of the public methods of Progress can be found in the Progress API.
Step 3: Add the scripts to your HTML
NOTE that the
InfusionAll.js file is minified - all of the whitespace has been removed, so it isn't really human-readable. If you're using the source distribution and you want to be able to debug the code, you'll want to include each of the required files individually. This would look like this:
But all of these individual files are not necessary to make it work - the
InfusionAll.js file has everything you need.
Step 4: Apply styles
Your progress won't look or behave like a Progress Bar without some styling. The Progress component does not come with default CSS for styling since you can build so many different kinds of progress bars with it.
A few things to note about how we've styled the Progress elements in this example: