Progress

Minimise visual changes that occur while your app loads content by representing each operation with a single activity indicator.

Circular

<div class="progress-circular">
    <div class="progress-circular-wrapper">
        <div class="progress-circular-inner">
            <div class="progress-circular-left">
                <div class="progress-circular-spinner"></div>
            </div>
            <div class="progress-circular-gap"></div>
            <div class="progress-circular-right">
                <div class="progress-circular-spinner"></div>
            </div>
        </div>
    </div>
</div>

Coloured Circular

.progress-circular-brand

.progress-circular-green

.progress-circular-orange

.progress-circular-red

Determinate Linear

<div class="progress">
    <div class="progress-bar"></div>
</div>

Coloured Determinate Linear

.progress-brand

.progress-green

.progress-orange

.progress-red

Indeterminate Linear

<div class="progress">
    <div class="progress-bar-indeterminate"></div>
</div>

Load Bars

Usage

A .load-bar requires four different colours to achieve the best visual effect. A complete load bar consists of two separate .load-bars, and the order of .load-bar-progresss in each of the two .load-bars is different.

<div class="progress">
    <div class="load-bar">
        <div class="load-bar-base">
            <div class="load-bar-content">
                <div class="load-bar-progress"></div>
                <div class="load-bar-progress load-bar-progress-brand"></div>
                <div class="load-bar-progress load-bar-progress-green"></div>
                <div class="load-bar-progress load-bar-progress-orange"></div>
            </div>
        </div>
    </div>
    <div class="load-bar">
        <div class="load-bar-base">
            <div class="load-bar-content">
                <div class="load-bar-progress"></div>
                <div class="load-bar-progress load-bar-progress-orange"></div>
                <div class="load-bar-progress load-bar-progress-green"></div>
                <div class="load-bar-progress load-bar-progress-brand"></div>
            </div>
        </div>
    </div>
</div>

Loading Examples

info_outline

Use .el-loading with progress to indicate additional content is being loaded. Add .el-loading-done via custom Javascript when content has been loaded to remove loading indicators.

placeholder

Finish Loading

placeholder

Finish Loading

placeholder

Finish Loading

click to expand this tile