Minimize visual changes that occur while your app loads content by representing each operation with a single activity indicator. For example, a refresh operation should display either a refresh bar or an activity circle, but not both.

If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.

When indicators are determinate they indicate how long an operation will take when the percentage complete is detectable.

<div class="progress">
    <div class="determinate" style="width: 70%"></div>
</div>

When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.

<div class="progress">
    <div class="indeterminate"></div>
</div>