Child pages
  • Tutorial - Progress

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Section
Column
width60%

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 Progress

Scenario

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.

Panel
borderColor#566b30
bgColor#D3E3C4
borderStyleoutset

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.

Column
Panel
borderColor#321137
bgColor#fff
titleBGColor#aab597
titleStatus
borderStylesolid
titleStatus

This component is in Preview status

Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
borderStylesolid
titleOn This Page
borderStylesolid
Table of Contents
maxLevel5
minLevel2
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
borderStylesolid
titleSee Also
borderStylesolid
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
borderStylesolid
titleStill need help?
borderStylesolid

Join the infusion-users mailing list and ask your questions there.

...