Specifying the style and layout of a progress bar

You can customize the style and layoutof your progress bar, such as including a default image, adding tick marks, and selecting to show an empty progress bar as progress increases.

For responsive projects, the color of the label for the Orientation setting on the Properties ribbon indicates the device in which an orientation override was placed. For more information about developing responsive projects and setting overrides, see Working with responsive content.

To specify the style and layout of a progress bar:

  1. Do one of the following:

    The Properties ribbon is displayed.

  2. Use the fields in the Style and Layout group as follows:

    Click the Default Image drop-down list to specify the default image for use within the progress bar. When an image is selected, the progress bar will fill using the image. Each increment of the progress bar will replicate the image selected. Select a previously imported image from the list, click the Browse from File button to navigate and select an image, or click Browse for Media to navigate and select an image from the Media Library. Click to edit the image.
    Border Weight

    Click the up and down arrows in the field to adjust the weight of the border.
    Tick Marks Enable this to show tick marks within the progress bar.
     Fill

    Select this to specify the fill color.

    See also: Selecting custom colors
    Matching colors used within project
    Empty Bar The typical functionality for a progress bar as progress increases is for it to fill left-to-right (for horizontal orientation) or bottom-to-top (for vertical orientation). Select this specify to empty a progress bar as progress increases instead. This will cause the bar to "drain" right-to-left (for horizontal orientation) or top-to-bottom (for vertical orientation).
     Background

    Select this to specify the color of the background. Use the Color list to select a predefined color or select Custom to select a custom color from the Color palette. The custom color you select is saved to the Recent Colors list.

    See also: Selecting custom colors
    Matching colors used within project
    Border

    Select this to specify the color of the border. Use the Color list to select a predefined color or select Custom to select a custom color from the Color palette. The custom color you select is saved to the Recent Colors list.

    See also: Selecting custom colors
    Matching colors used within project

Knowledge Base | Training | Support
© Copyright ELB Learning 2023