There are a couple types of progress indicators that you can use. For now you can use the determinate, indeterminate and circle

For the determinate progress indicator all you have to do is wrap a .progress__bar element inside a .progress--determinate element. On the .progress__bar you can set the progress by defining the width in the style attribute.

    
<div class="progress progress--determinate">
    <div class="progress__bar" style="width:40%"></div>
</div>

<progress min="0" max="100" value="40" class="progress progress--determinate">
    <div class="progress progress--determinate">
        <div class="progress__bar" style="width:40%"></div>
    </div>
</progress>
    

For the indeterminate progress indicator all you have to do is wrap a .progress__bar element inside a .progress--indeterminate element. The .progress__bar will than animate it self.

    
<div class="progress progress--indeterminate">
    <div class="progress__bar" style="width:40%"></div>
</div>

<progress min="0" max="100" value="40" class="progress progress--indeterminate">
    <div class="progress progress--indeterminate">
        <div class="progress__bar" style="width:40%"></div>
    </div>
</progress>