<!-- ============ PROGRESS -->
<!-- ====================== -->

<h1>Progress</h1>

<!-- ============ VARIABLES -->
<!-- ====================== -->
<p>
	<h4>Global variables</h4>
	<div><pre hljs class="prettyprint lang-sass">$progress-class: "-progress" !global
$progress-bar-class: "-bar" !global
$progress-bar-padding-vertical: $base-padding-vertical / 3
$progress-bar-padding-horizontal: $base-padding-horizontal / 1.5
$progress-font-weight: 600 !global
$progress-border-radius: 4px !global
$progress-border-width: 0px !global
$progress-border-style: solid !global
$progress-padding: 3px !global
$progress-background: #fff !global</pre></div>
</p>



<p>
	Use widget class <code>-progress</code>. Apply themes and sizes. Append <code>-bar</code> inside <code>-progress</code>.
</p>

<div class="-row example-block">

	<div class="-col12 view">
		<div class="-progress -primary-">
			<div class="-bar" style="width: 12%">12 %</div><div class="-bar -warning-" style="width: 25%">25 %</div><div class="-bar -error-" style="width: 5%">Something goes wrong</div>
		</div>
		<br>
		<div class="-progress _divine -primary-">
			<div class="-bar" style="width: 12%">12 %</div>
		</div>
		<br>
		<div class="-progress -primary- -shadow-curve-">
			<div class="-bar" style="width: 42%">progress with shadow 42 %</div><div class="-bar -warning-" style="width: 25%">25 %</div>
		</div>
		<br>
		<div class="-progress -primary- -shadow-lifted-">
			<div class="-bar" style="width: 42%">progress with shadow 42 %</div>
		</div>
	</div>


	<div class="-col12 example"><pre hljs class="prettyprint lang-html"><div class="-progress -primary-">
	<div class="-bar" style="width: 12%">12 %</div>
	<div class="-bar -warning-" style="width: 25%">25 %</div>
	<div class="-bar -error-" style="width: 5%">Something goes wrong</div>
</div>

<div class="-progress _divine -primary-">
	<div class="-bar" style="width: 12%">12 %</div>
</div>
</pre></div>

</div>
