Loaders

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

Circle

The classic spinning loader, can for example be used in buttons.

Markup

<div pam-Loader="circle small"></div>
<div pam-Loader="circle"></div>
<div pam-Loader="circle large"></div>

Pulse

Suitable for centered generic context loading.

Markup

<div pam-Loader="pulse small"></div>
<div pam-Loader="pulse"></div>
<div pam-Loader="pulse large"></div>

Examples

Some examples of circle loader in button and input context.

Markup

<form pam-Form>
    <div pam-Form-Inline="reverse">
        <label for="group-input-loader" pam-Form-Icon>
            <div pam-Loader="circle small"></div>
        </label>
        <input id="group-input-loader" type="text" placeholder="Input group loader" pam-Form-Control disabled>
    </div>
<form>