> ## Documentation Index
> Fetch the complete documentation index at: https://store-docs.quizify.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Customising the Quiz Loader and Animations

> How to customise the loading animation shown while your Quizify quiz initialises — choosing a loader style, uploading a custom GIF, and setting colour and size.

When a customer visits a page where your quiz is embedded, a brief loading animation appears while the quiz initialises. You can customise this loader — choosing a built-in style, uploading your own animated GIF, or changing its colour and size.

***

## What the Quiz Loader Is

The quiz loader is a short animation shown between the page loading and the quiz becoming interactive. It typically appears as a spinner, dots, or another animated indicator in the centre of the quiz area.

The loader appears because:

* The quiz script needs to load before the quiz renders

* The quiz fetches your questions and settings from Quizify before displaying them

On fast connections, the loader may only be visible for a brief moment. On slower connections, it may be visible for a second or two.

***

## Selecting a Built-In Loader Style

1. Open your quiz in the Quizify editor

2. Go to **Design** → **Loader** (or the equivalent section)

3. Browse the available loader styles

4. Select the one you prefer

5. Save

***

## Uploading a Custom GIF as the Loader

If you want the loader to display your own branded animation:

1. In the loader settings, find the **Custom GIF** or **Upload Loader** option

2. Click **Upload** and select a GIF file from your computer

3. The GIF will replace the default loader animation

4. Save

<Tip><p>Use a GIF that is small in file size — a loader GIF that is itself slow to load defeats the purpose. Aim for under 100KB. A simple looping animation typically works better than a complex one.</p></Tip>

## Setting Loader Colour

If you are using a built-in loader style, you can often change its colour to match your brand:

1. Find the loader colour field in the loader settings

2. Enter a hex code or select from the colour picker

3. Save

***

## Setting Loader Size

You can adjust the size of the loader animation:

1. Find the loader size setting

2. Enter a pixel value

3. Save