# Animations & Loaders

Access at **Settings > AjaxPress > Animations**.

## Loader Type

Choose the loading indicator shown during page transitions.

### Progress Bar

A horizontal bar that animates across the screen during page loads.

| Setting | Options | Default |
|---------|---------|---------|
| Position | Top, Bottom | Top |
| Color | Any hex color | `#3b82f6` (blue) |
| Weight | Thin (3px), Normal (7px), Large (12px), Custom | Normal |
| Opacity | 0-100% | 100% |
| Wave Animation | On/Off | On |
| Animation Speed | Seconds | 2s |
| Auto Hide | On/Off | On |
| Custom Class | CSS class name | -- |
| Custom ID | CSS ID | -- |

### Spinner

A centered overlay with an optional image and text message.

| Setting | Options | Default |
|---------|---------|---------|
| Layout | Icon Only, Icon Left/Right/Top/Bottom, Text Only | Icon Only |
| Image | Media library upload | -- |
| Image Size | Pixels | 40px |
| Image Rotation | On/Off | Off |
| Message | Text string | "Loading..." |
| Text Color | Hex color | `#000000` |
| Font Family | Font name | inherit |
| Font Weight | CSS weight | normal |
| Font Size | Pixels | 14px |
| Letter Spacing | Pixels | 0 |
| Background Color | Hex color | `#ffffff` |
| Background Opacity | 0-100% | 80% |
| Animate Cursor | On/Off | Off |
| Cursor Mode | Wait, Progress | Wait |
| Disable Clicks | On/Off | Off |
| Gap (image-text) | Pixels | 10px |
| Custom Class | CSS class name | -- |
| Custom ID | CSS ID | -- |

### None

Disables the loading indicator entirely. Page transitions still occur but without visual loading feedback.

## Page Transition Animation

Controls how page content animates when swapping between pages.

### Animation Types

| Type | Description | Pro Required |
|------|-------------|-------------|
| Fade | Content fades out and new content fades in | No |
| Slide | Content slides up/down with fade | Yes |
| Scale | Content scales down/up with fade | Yes |
| Flip | Content rotates in 3D with fade | Yes |

### Duration

| Preset | Duration |
|--------|----------|
| Fast | 0.2 seconds |
| Normal | 0.3 seconds |
| Slow | 0.5 seconds |

### Disabling Animations

Set `content_animation` to Off to disable page transition animations. Content will swap instantly.

## Live Preview

The Animations page includes a live preview panel that demonstrates the selected animation. Toggle between desktop and mobile views to preview responsive behavior.