This page will walk you through an example of adding the Fluid Progress component to an HTML file. This tutorial assumes that: - you are already familiar with HTML, Javascript and CSS
- you are familiar with what the Progress component is and does
- now you just want to know how to add it to your file.
For more general information about the Progress, see Progress. For technical API documentation, see Progress API. Tutorial: How to Use the ProgressScenarioThis 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. | Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #D3E3C4 |
|---|
| borderStyle | outset |
|---|
| For the purpose of this tutorial we'll use a little function called anIllusionOfProgress who's sole purpose is to mimic an incremental process and make calls to the Fluid Progress component. anIllusionOfProgress is not, in any way, part of Fluid Progress and is not needed for integration with the Progress component. |
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. |