HTML and AUI Toolkit for Confluence
  • Introduction
  • Administrator Guide
    • Sample Page Code
    • Data Center Compatibility
  • AUI Macros
    • AUI Badge
    • AUI Button
    • AUI Dialog
    • AUI Dropdown Menu
    • AUI Flag
    • AUI Icon
    • AUI Lozenge
    • AUI Message
    • AUI Progress Bar
    • AUI Progress Bar 2
  • HTML Macros
    • HTML Address
    • HTML Blockquote
    • HTML Cite
    • HTML Custom Tag
    • HTML Div
    • HTML Embed
    • HTML Figure and HTML Figure Caption
    • HTML Footer
    • HTML Html
    • HTML Image Map and HTML Image Area
    • HTML Img
    • HTML Preformatted
    • HTML Progress Bar
    • HTML Script
    • HTML Small Text
    • HTML Spacer
    • HTML Span
    • HTML Strikethrough
    • HTML Style
Powered by GitBook
On this page
  • Description
  • Adding the Macro
  • Macro Options
  • ID
  • Progress
  • Width
  • Height
  1. AUI Macros

AUI Progress Bar

PreviousAUI MessageNextAUI Progress Bar 2

Last updated 2 years ago

Description

The AUI Progress Bar can also be a useful visual component on your page even though as a static display. However, with the ID parameter you can also change the progress via an external Javascript if you like.

Adding the Macro

  1. Edit your page.

  2. Select “+” => Other macros

  3. Type in “aui” in the Search box

  4. Select the “AUI Progress Bar” macro

Macro Options

Note: The progress bar will not show in the preview section. Save the page to see the result.

ID

Enter a unique ID for this object on your page. The macro is not using it though. But you can use it to address the progress bar with an external Javascript.

Using the Confluence jQuery implementation you can adjust the progress bar like this:

AJS.progressBars.update("#my-progress-bar", 0.75);

Progress

Enter the progress in percent here, e.g 32.

Width

The progress bar will adjust its width to the parent element. It will usually expand over the width of your page. You can enter a fixed width here, e.g. 400px.

Height

This parameter specifies the height of the progress bar.