Copied content to clipboard.

Progress determinate

Example

<div class="pb-progress">
            <div class="pb-progress_determinate" style="width:66%;"></div>
        </div>

Progress indeterminate

Example

<div class="pb-progress">
            <div class="pb-progress_indeterminate"></div>
        </div>

Progress spinner

Example

<div class="pb-spinner">
            <svg class="pb-spinner_icon" viewbox="28 28 44 44">
                <circle class="pb-spinner_path" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"/>
            </svg>
        </div>

Progress spinner mini

Example

<div class="pb-spinner pb-spinner--mini">
            <svg class="pb-spinner_icon" viewbox="28 28 44 44">
                <circle class="pb-spinner_path" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"/>
            </svg>
        </div>

Progress spinner raised

Example

<div class="pb-spinner">
            <svg class="pb-spinner_icon pb-spinner--raised" viewbox="28 28 44 44">
                <circle class="pb-spinner_path" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"/>
            </svg>
        </div>

Progress spinner raised mini

Example

<div class="pb-spinner pb-spinner--mini pb-spinner--raised">
            <svg class="pb-spinner_icon" viewbox="28 28 44 44">
                <circle class="pb-spinner_path" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"/>
            </svg>
        </div>