> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.quizell.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Add and Customize a Loader

### Adding and Customizing a Loader in Quizell

### Introduction

A **Loader** shows a short countdown animation on a page and then moves the user to the next (or previous) page automatically when the timer ends. It’s a great way to create a smooth, branded transition — for example, a “calculating your results” moment on a lead page. You can add a Loader from **Add Content**, set its timer, size and colors, and save the changes.

This guide walks you through adding and customizing a Loader step by step.

---

### Step 1: Open the Page and Click Add Content

1. From your Quizell dashboard, go to **Quizzes** and open the quiz you want to customize.
2. In the page thumbnails below the preview, select the page where you want the loader (for example, a **Lead Page**).
3. In the right panel, click **Add Content**.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/ld1_12x5mbq.png =1000x511)

---

### Step 2: Add the Loader

1. In the **Add Content** window, look under **Progress / Data**.
2. Click **Loader**. An **Inline Loader** is added to the page.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/ld2_d3l49r.png =1000x511)


---

### Step 3: Set the Timer and Loader Style

1. Click **Inline Loader** in the right panel to open its settings.
2. Set the following:
* **Timer (sec)** – how long the loader runs
* **When timer ends** – Go to Next Page or Go to Previous Page
* **Size** – the loader size in px
* **Custom Loader Image** – upload your own loader image (optional)
3. The loader preview updates instantly in the editor.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/ld3_wbkaxv.png =1000x511)


---

### Step 4: Customize Colors and Save

1. Open **Advanced design controls** to set the **Foreground Color**, **Background Color** and **Padding**.
2. Click **Save** at the top right to apply the changes.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/ld4_796t2x.png =1000x511)

---

### Final Notes

* The loader starts as soon as the page opens and moves to the selected page when the timer ends.
* Keep the timer short for the best user experience.
* Match loader colors with your quiz or brand theme for consistency.