In progress

Sometimes .spinner is not sufficient to indicate loading state. .in-progress class allows you to set al loading style of content. It can be used to create a content placeholder in loading state or add progress effect to anything like progress bar or button.

Examples

<div class="in-progress">
    <div class="h-3 bg-gray-lighter w-50pc"></div>
    <div class="h-3 bg-gray-lighter my-2"></div>
    <div class="h-3 bg-gray-lighter my-2"></div>
    <div class="h-3 bg-gray-lighter my-2"></div>
</div>
<button class="button bg-blue in-progress" disabled>Loading...</button>
<div class="bg-gray-lighter br-round">
    <div class="bg-blue w-60pc h-1 br-round in-progress"></div>
</div>