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.

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.

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.

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.

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.

Updated on: 26/10/2026