> For the complete documentation index, see [llms.txt](https://docs.funnelish.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.funnelish.com/start/funnel-builder/progress-bar.md).
# Progress Bar
Small tweaks to a site can lead to significant conversion improvements. Take the humble **Progress bar,** for instance.
When deployed effectively, this simple graphic can build customer confidence by showing them they're on the right path and that their transaction is almost complete.
## Adding a widget
To add a **Progress bar** widget:
1. Open a step.
2. Click one time the element (e.g. container, row cell) that will hold the widget.
3. Click the **Progress bar** widget on the left panel. Funnelish displays the widget and left-side settings panel.
Progress bar widget default settings
## Customizing the bar
You can customize the appearance of a bar (e.g. design and length of the progress bar). All the standard design tools are here, including text, colors, borders, margins, and padding.
Click the widget one time on the canvas. The settings panel displays on the left side of the screen.
To change bar length and label:
1. Go to the settings panel.
2. Locate the **Value** heading.
3. Change the figure as required.
4. Go to the **Label** heading.
5. Under **Label text** enter a Value figure.
6. Click Save changes.
7. Go to the **Label position** heading.
8. Choose the alignment of the text
{% hint style="warning" %}
**Note** Make sure you manually input the same figure for the **Value** and **Label text**.
{% endhint %}
### Styling the Progress Bar and adding animation
Under the Styles tab you can set up the colors and add an animation effect to the progress bar
1. Scroll down to **Styles** heading.
2. Assign the colors as desired.
3. To add a style, choose from the options in the dropdown.
4. To add the animation, switch on the toggle. (optional)
5. Click Save changes.
6. Click Preview.