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:
Do one of the following:
In the Project Explorer, double-click the graphic of the progress bar.
In the Project Explorer, right-click the graphic of the progress bar and select Properties.
In the Project Explorer, select the progress bar and press Enter.
In the work area, double-click the progress bar.
In the work area, right-click the progress bar and select Properties.
In the work area, select the progress bar and press Enter.
The Properties ribbon is displayed.
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 ![]() |
||
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. | ||
![]() |
Select this to specify the fill color.
|
||
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). | ||
![]() |
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.
|
||
![]() |
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.
|
© Copyright ELB Learning 2025