# 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FZLRi9EiK1QiQ4VRhounn%2FCourse_loading_page.01.png?alt=media&#x26;token=c5570bca-f5f7-4a1f-8a1c-fb873d66c867" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FLCubKxZOcqTAi1FSYOQ5%2FCourse_loading_page.02.png?alt=media&#x26;token=ec0c1995-c05d-4c93-9d49-34337aa93de0" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FS2iYgoBEq6eJPzmN73jQ%2FCourse_loading_page.03.png?alt=media&#x26;token=ec5f447c-448a-41aa-9c11-b49795afb998" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2Fq1TCJBVf5n4I9XqTGrN7%2FCourse_loading_page.04.png?alt=media&#x26;token=0de3bd1c-c5ab-462d-a32b-6fc4e67a9451" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FLWpcTkiY5BiM3NiTzhN0%2FCourse_loading_page.04.png?alt=media&#x26;token=cda4bb34-6069-4666-9624-7fce05c7ee11" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F0JneAsQV0AUU9oFHibQs%2FCourse_loading_page.05.png?alt=media&#x26;token=7199d462-0299-42a6-a2b0-95496d2dab72" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FhAuBeIlOwuKITnQp2584%2FCourse_loading_page.06.png?alt=media&#x26;token=0f69fcd9-1da4-44e1-9136-d59517a4f4c5" 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](https://help.parta.io/editor/work-in-the-editor/manage-resources) library.
{% endstep %}

{% step %}

### **Typography**

Click to open [common styling properties](https://help.parta.io/branding/typography-and-fonts#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 %}