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

Toggle example guides Toggle HTML 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>