Articles on: Quiz Building & Design

How to Customize Your Loader

Introduction

Customizing your quiz loader in Quizell helps you deliver a branded, seamless experience from the very first second. You can either use one of our built-in animations or upload your own design for a fully customized look.

Step-by-Step Setup Guide

Step 1: Open the Loader Settings

From your Quizell dashboard, select the quiz you want to edit.

In the left-hand menu, click Configuration.

Select Loader to open the loader settings.

Step 2 (Option 1): Use a Prebuilt Quizell Loader

Choose one of Quizell’s built-in loader animations.
Click Save Changes to apply your selection.

Optional: Customize Loader Colors

Click the Edit Colors button (top-right corner).
Adjust Loader Color and Background Color using HEX, RGB, or HSL values to match your brand.

Step 3 (Option 2): Upload a Custom Loader

For a fully branded experience, upload your own loader design.

Select the Add Custom Loader option.

Upload your image file or choose one from your gallery.

Preview the loader in the display area.
Click Save Changes to apply it.

Step 4: Update the Embed Code (If Needed)

If you’ve embedded your quiz manually, you may need to update the code.

Go to the Share section in the quiz editor.

Copy the updated embed code.

Replace the old embed code on your website.
Test on your site to confirm the new loader displays correctly.

Tips for a Great Loader Experience

✅ Test before publishing to ensure it looks good across devices.

✅ Keep it lightweight — avoid large files that slow down loading.

✅ Stay on-brand with colors, images, or animations.

✅ Avoid disruption — loaders should enhance, not distract.

What’s Next?

Explore more ways to personalize your quiz experience:

Updated on: 02/10/2025

Was this article helpful?

Yes
No

Thank you!