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
placeholder
placeholder

Finish Loading

placeholder
placeholder
placeholder

Finish Loading

placeholder
placeholder
placeholder

Finish Loading

click to expand this tile
click to expand this tile
click to expand this tile