Progress bar
On this page
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, 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.
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-indexon a sticky header can cover the bar. Raise the bar in Custom 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.