Progress

Communicate that somethings is happening with a progress. They can be used on almost all elements div, span etc. Use type or size modifiers to adopt the progress to your context. Out of the box there are three sizes small, default and large. To control the visibility of the progress use the trait pam-visibility="{hide | hidden | invisible}".

Circle

The classic circular progress indicator, can for example be used to indicate a page refresh. It supports state color modifiers and three size modifiers. Sizes are small, default and large.

Markup

<div pam-Progress="circle small info"></div>
<div pam-Progress="circle"></div>
<div pam-Progress="circle large success"></div>

Linear

Linear progress indicators display progress of a process that has a fixed or unknown timeline.

Determinate

Display the length of a determinate process with lineary progress. Change the progress by using the size width trait or inline styles. For example pam-size="w:1-4" or style="width: 57%;". It supports size modifiers via the size height trait and colors modifiers on pam-progress-bar via the skin component.

Markup

<div pam-progress="linear" pam-space="mb:4" pam-size="h:2px">
    <div pam-progress-bar pam-skin="info" pam-size="w:1-4"></div>
</div>
<div pam-progress="linear" pam-space="mb:4">
    <div pam-progress-bar pam-size="w:2-4"></div>
</div>
<div pam-progress="linear" pam-size="h:8px">
    <div pam-progress-bar pam-skin="success" pam-size="w:3-4" style="width: 75%;"></div>
</div>

Indeterminate

Display the length of a process with an unspecified time line. It supports size modifiers via the size height trait and state color modifiers.

Markup

<div pam-progress="linear infinite info" pam-space="mb:4"  pam-size="h:2px"></div>
<div pam-progress="linear infinite" pam-space="mb:4"></div>
<div pam-progress="linear infinite success" pam-size="h:8px"></div>

Examples

Some examples of circle progress in button and input context.

Markup

<button pam-Button pam-space="mb:4">
    Button <span pam-Progress="circle small" pam-space="ml:2"></span>
</button>
 <form pam-Form>
    <div pam-Form-Inline="reverse">
        <label for="group-input-progress" pam-Form-Icon>
            <div pam-Progress="circle small"></div>
        </label>
        <input id="group-input-progress" type="text" placeholder="Input group progress" pam-Form-Control disabled>
    </div>
<form>

Hooks

.hook-progress

Variables

These are all the component specific variables that can be used for customization.

Name	Value
@circle-border-color-error	`@skin-error`
@circle-border-color-info	`@skin-info`
@circle-border-color-success	`@skin-success`
@circle-border-color-warning	`@skin-warning`
@circle-border-color	`@skin-gray-300`
@circle-border-indicator-color	`@skin-primary`
@circle-border-width	`0.2rem`
@circle-height	`@space-24`
@circle-width	`@space-24`
@circle-small-height	`@space-16`
@circle-small-width	`@space-16`
@circle-large-height	`@space-48`
@circle-large-width	`@space-48`
@progress-bar-timing-function	`ease`
@progress-bar-transition-duration	`0.6s`
@progress-bar-transition-property	`width`
@progress-linear-bg	`@skin-gray-300`
@progress-linear-duration	`1.2s`
@progress-linear-height	`@space-4`
@progress-linear-indicator-bg	`@skin-primary`
@progress-linear-iteration-count	`infinite`
@progress-linear-margin	`0`
@progress-linear-timing-function	`cubic-bezier(0.4, 0, 0.2, 1)`
@progress-linear-width	`100%`
@progress-linear-infinite-bg-error	`@skin-error`
@progress-linear-infinite-bg-info	`@skin-info`
@progress-linear-infinite-bg-success	`@skin-success`
@progress-linear-infinite-bg-warning	`@skin-warning`