Mergado Apps : Loading / Progres

Loading block

Please wait...

<div class="loading-block">
	<svg class="icon icon-loading " aria-hidden="true"><use xlink:href="/docs/assets/style-guide/icons.svg#loading"></use></svg>
	<p>
		Please wait...
	</p>
</div>

Progress bar

Static

Animated

<-- Static -->
<div class="progress-bar">
	<div class="progress-bar-inside" style="width: 0%;"></div>
</div>
<div class="progress-bar">
	<div class="progress-bar-inside" style="width: 25%;"></div>
</div>
<div class="progress-bar">
	<div class="progress-bar-inside" style="width: 75%;"></div>
</div>
<div class="progress-bar">
	<div class="progress-bar-inside" style="width: 100%;"></div>
</div>
<-- Animated -->
<div class="progress-bar progress-loop">
	<div class="progress-bar-inside" style="width: 0%;"></div>
</div>
<div class="progress-bar progress-loop">
	<div class="progress-bar-inside" style="width: 25%;"></div>
</div>
<div class="progress-bar progress-loop">
	<div class="progress-bar-inside" style="width: 75%;"></div>
</div>
<div class="progress-bar progress-loop">
	<div class="progress-bar-inside" style="width: 100%;"></div>
</div>