Progress bar

Progress bar can be used to track the progress of whatever you’re making. Keep in mind that you have to customize the width yourself with some JavaScript tricks or whatever pleases you.

<div class="progress-container">
  <div class="progress-bar COLOUR-bar" style="width: 25%;"></div>
</div>

<!-- or if you want % number inside progress bar -->

<div class="progress-container">
  <div class="progress-bar COLOUR-bar" style="width: 25%;" data-progress="25%"></div>
</div>

You can use any colours. Just replace the COLOUR-bar with whatever you desire.

Examples:

Loading

It will only import the loading animation, not the text above.

NOTE: It does not disappear by itself, you'll have to make it disappear yourself.

<div class="loader">Loading...</div>
Loading...

Tooltip

You can use tooltip on any kind of element in your website, just keep in mind that you have to use tooltip class and data-tooltip. By default, it’s located at bottom, but you can change directions to either left or right.

<p class="tooltip left|right" data-tooltip="Hello world.">Some nice text</p>

Examples:

Tooltip bottom

Tooltip left

Tooltip right

Label

You can customize the label to any colour you desire.

<h3>Hello<span class="label COLOUR">BETA</span></h3>

HelloBETA