# Custom CSS

> Style the loader and your persistent players with your own CSS, and why it doesn't reach your pages.

Source: https://arraystory.com/docs/ajaxpress/custom-css/

**Custom CSS** is for styling what AjaxPress itself puts on screen: the loading bar or spinner, and your persistent players. It's under **Settings → AjaxPress → Advanced → Custom CSS**, and it's free.

## What it reaches, and what it doesn't

With AjaxPress, each of your pages is shown inside a frame, and AjaxPress's own elements sit above that frame. Custom CSS is added to that outer layer, so:

| Styled by Custom CSS | Not styled by Custom CSS |
| --- | --- |
| The progress bar and the spinner | Your pages' content, header and footer |
| [Persistent players](https://arraystory.com/docs/ajaxpress/keep-audio-or-video-playing-across-pages/), once they're lifted out of the page | Anything else inside the page |
| The loading cursor | |

To style your site itself, use your theme: **Appearance → Customize → Additional CSS**, the Site Editor's styles, or your child theme.

## Selectors

![Style the loader with Custom CSS under Advanced.](https://r2.arraystory.com/docs/ajaxpress/custom-css.mp4?v=e330ce6bbe)

| Selector | Element |
| --- | --- |
| `.ajaxpress-progressbar` | The progress bar's track |
| `.ajaxpress-progressbar-bar` | The moving bar |
| `.ajaxpress-spinner` | The spinner, including its overlay |
| `.ajaxpress-spinner-overlay` | The spinner's backdrop |
| `.ajaxpress-spinner-content` | The icon and message together |
| `.ajaxpress-spinner-image` | The spinner icon |
| `.ajaxpress-spinner-text` | The loading message |
| `html.ajaxpress-cursor-active` | Present while a page loads |
| `#ajaxpress-persist` | The container that holds persistent players |
| `#ajaxpress-persist [data-persist-key="…"]` | One persistent player, by its key |

## Examples

A rounded, glowing progress bar:

```css
.ajaxpress-progressbar-bar {
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 8px rgb(3 123 255 / 0.6);
}
```

Keep the progress bar above a sticky header with a very high stacking order:

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

Pin a persistent player to the bottom of the screen:

```css
#radio-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
```

More player styling is in [Position and style a persistent player](https://arraystory.com/docs/ajaxpress/position-and-style-a-persistent-player/).

## Good to know

- **Try it in the preview.** The preview on the Animations tab uses your Custom CSS, so you can check loader styles before saving. To see changes on your site, save, then reload the page.
- **Clear your page cache** after saving if your site uses one.
- **`!important` is sometimes needed.** AjaxPress sets some styles directly on its elements, and those win over a normal rule.