<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.
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.
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>
You can customize the label to any colour you desire.
<h3>Hello<span class="label COLOUR">BETA</span></h3>