Progress

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

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

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

.progress-brand

.progress-green

.progress-orange

.progress-red

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

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>