Awesomeness

Loading Indicators

Progress bars

Progress bars can be used to indicate loading content and also show the current status of the loading process. Use them with to nested divs. The outer div should get the class .progress, the inner div the class .progress__bar. With javascript you can animate the progress by setting the width of the .progress__bar. Additionally you can style the progress bar with the classes .progress--stripped and .progress--active

Example

Imports

  • SASS:
    @import "base";
@import "imports/modules/progress-bar";

Code

<div class="progress progress--striped progress--active">
	<div class="progress__bar" style="width:30%;"></div>
</div>
<div class="progress">
	<div class="progress__bar" style="width:60%;"></div>
</div>

Spinner

Spinners, also called Loading Wheels, can be used to indicate loading content and also show the current status of the loading process. Each spinner has a .spinner div that contains two span elements with the class .spinner__side. One of the spans get's the class .spinner--left, while the other get's .spinner--right, each one representing one half of the spinner. Also each span should contain another div with the class .spinner__fill. You can also style the spinner like a donut by replacing the .spinner class with .spinner--has-hole

Example

Imports

  • SASS:
    @import "base";
@import "imports/modules/spinner";

Code

<div class="spinner">
    <span class="spinner__side spinner--left">
	    <span class="spinner__fill"></span>
	</span>
	<span class="spinner__side spinner--right">
	    <span class="spinner__fill"></span>
    </span>
</div>
<div class="spinner--has-hole">
    <div class="spinner">
	    <span class="spinner__side spinner--left">
		    <span class="spinner__fill"></span>
		</span>
		<span class="spinner__side spinner--right">
		    <span class="spinner__fill"></span>
	    </span>
    </div>
</div>