> For the complete documentation index, see [llms.txt](https://help.parta.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.parta.io/branding/create-branding/section/course-loading-page.md).

# Course loading page

## What is a Course loading page?

A **course loading page** is a temporary screen shown while your course is loading its content, confirming that the process is active and not frozen.

Create a **course loading page** with your company's style and make the loading process intuitive and stylish with Parta.io.

## Set a Course Loading Page Branding

<figure><img src="/files/lUULTeJrVrWdHtVuiXiN" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}
Go to the **Branding** tab.
{% endstep %}

{% step %}
Select a checkbox next to the branding template.
{% endstep %}

{% step %}
Select **Edit**.

A new window will appear.

<figure><img src="/files/K2OHsH5G6fKsNBCnHrWJ" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Go to the **Section** tab.
{% endstep %}

{% step %}
Select **Course loading page.**

A pop-up window will appear.

<figure><img src="/files/reXd5xyxpnQX7sCHLTOb" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
[Set a course loading page brandin&#x67;**.**](#edit-course-loading-page-branding-settings)
{% endstep %}

{% step %}
Preview the changes of the loading screen.
{% endstep %}

{% step %}
Reset the changes to default.
{% endstep %}

{% step %}
Click the **Save** button to apply the changes.
{% endstep %}
{% endstepper %}

## Edit Course Loading Page Branding Settings

[Open](#set-a-course-loading-page) a сourse loading page settings window to start editing.

<figure><img src="/files/LKKZWUEQZcqSgBRoaj2k" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

### **Background** color

Change the background color and its intensity by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### **Display text**

Click **No** to hide text from the loader.
{% endstep %}

{% step %}

### **Display loader**

Click **No** to hide text from the loader bar.

> Customize the loading page text:

<figure><img src="/files/fibw3mf4OAufs4yhRUUI" alt=""><figcaption></figcaption></figure>

> **a.** Open a project and go to the **Translation** tab.\
> **b.** Go to the **Labels settings** tab.\
> **c.** Click the **Edit labels** button.

<figure><img src="/files/uvB1oZV2Oq4NRiyALdKK" alt=""><figcaption></figcaption></figure>

> **d.** Scroll down and change the text next to the **Course loading page**, **Loading text.**

<figure><img src="/files/9HLY4wK5N0OyDkBLRt7P" alt=""><figcaption></figcaption></figure>

> **e.** Scroll up and click the **Save** button to apply the changes.
> {% endstep %}

{% step %}

### **Loader (background)**

Change the **background loader** color and its intensity by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### **Loader (completed)**

Change the **completed loader** color and its intensity by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### **Logo frame width**

Enter the width of the logo in pixels.
{% endstep %}

{% step %}

### **Logo frame height**

Enter the height of the logo in pixels.
{% endstep %}

{% step %}

### **Logo**

Download a logo file from the [Resources](/project/manage-resources.md) library.
{% endstep %}

{% step %}

### **Typography**

Click to open [common styling properties](/branding/create-branding/typography-and-fonts.md#common-styling-properties) settings of the course loading page text.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Remember to apply the changes via the **Save** button.
{% endhint %}