# Progress bar

> Style the loading bar: top or bottom, thickness, colour, transparency and the shimmer animation. (Pro)

Source: https://arraystory.com/docs/ajaxpress/progress-bar/

The progress bar is AjaxPress's default loading indicator: a thin line along the edge of the screen that fills while the next page loads. The free plugin shows it in a clean default style. With [AjaxPress Pro](https://arraystory.com/docs/ajaxpress/ajaxpress-pro/), you can style every part of it.

Go to **Settings → AjaxPress → Animations**, and choose **Progress Bar** under **Select Loader**. Its settings appear below, and the preview on the right updates as you change them.

![Show a progress bar while the next page loads.](https://r2.arraystory.com/docs/ajaxpress/progress-bar.mp4?v=4538203734)

## Settings

| Setting | Options | Default |
| --- | --- | --- |
| **Position** | Top or Bottom of the screen | Top |
| **Thickness** | Thin (3px), Normal (7px), Large (12px), or Custom | Thin |
| **Custom Size** | Any CSS length, such as `4px` or `0.25rem` (shown when Thickness is Custom) | `7px` |
| **Color** | Any colour, or one of the suggested swatches | Blue |
| **Transparency** | How solid the bar is: 100% is fully solid, lower is more see-through | 80% |
| **Animate Bar Background** | A shimmer that runs along the bar while it fills | On |
| **Animation Speed** | Slow, Normal or Fast shimmer (shown when the shimmer is on) | Normal |

In **Custom Size**, the arrow keys (or the + and − buttons) change the number by one. A value AjaxPress can't use shows **Invalid CSS value**, and the bar falls back to 7px.

## How the bar moves

A browser can't tell how much of a page is left to download, so no loading bar is truly "accurate". AjaxPress's bar jumps ahead quickly at first, slows down as it goes, and never passes about 95% until the page is actually ready. Then it completes and fades away. On a fast site you'll only see a quick sweep.

## Tips

- **Match your brand.** Use your theme's accent colour, at 100% transparency, for a crisp line.
- **Thin is usually enough.** A thick bar draws more attention to waiting.
- **Bottom works well** when your site has a sticky header with a coloured border at the top.
- **Hidden behind your header?** A very high `z-index` on a sticky header can cover the bar. Raise the bar in [Custom CSS](https://arraystory.com/docs/ajaxpress/custom-css/):

```css
.ajaxpress-progressbar {
  z-index: 2147483647 !important;
}
```

## Free plugin

Without Pro, the bar uses the default style (a thin blue shimmering line at the top). The settings are shown but locked. You can still restyle it with [Custom CSS](https://arraystory.com/docs/ajaxpress/custom-css/).