PROGRESS ELEMENTS

Show something's progress to your visitors in your design with style!

About elements

There are two different kinds of progress elements you can use:

  • One of them is progress bars that shows the progress as a line,
  • The other one is circular loaders that shows the progress as infinite loop.

Progress bars

Progress bars are the elements that shows something's progress as a linear style. To create a progress bar you need to create an element with .jtbProgressBar

			Copy
			<div class='jtbProgressBar'>
	<span style='width: 20%;'></span>
</div>
		

How it works

jtbProgressBars are built with two HTML elements, some CSS to set the width, and a few attributes.

  • We use the .jtbProgressBar as a wrapper.
  • We use the inner .jtbProgress to indicate the current progress (value), maximum value (maxValue) and minimum value (minValue) available for it.

			Copy
			<div class='jtbProgressBar'>
	<span class='jtbProgress' minValue='0' maxValue='100' value='0'></span>
</div>

<div class='jtbProgressBar'>
	<span class='jtbProgress' minValue='0' maxValue='100' value='25'></span>
</div>

<div class='jtbProgressBar'>
	<span class='jtbProgress' minValue='0' maxValue='100' value='50'></span>
</div>

<div class='jtbProgressBar'>
	<span class='jtbProgress' minValue='0' maxValue='100' value='75'></span>
</div>

<div class='jtbProgressBar'>
	<span class='jtbProgress' minValue='0' maxValue='100' value='100'></span>
</div>
		

Labeling

It is also possible to show the current progress via text inside your progress too. Just add the desired text inside your .jtbProgress

35%
			Copy
			<div class='jtbProgressBar'>
	<span class='jtbProgress' minValue='0' maxValue='100' value='35'>35%</span>
</div>
		

Adjusting height

You can change the height of the progress bar with adding height value on your .jtbProgressBar

35%
35%
			Copy
			<div class='jtbProgressBar' style='height: 10px;'>
	<span class='jtbProgress' minValue='0' maxValue='100' value='35'>35%</span>
</div>

<div class='jtbProgressBar' style='height: 50px;'>
	<span class='jtbProgress' minValue='0' maxValue='100' value='35'>35%</span>
</div>
		

Coloring

There are multiple colors available for the .jtbProgressBar. You can create your own or use one of the following:

15%
30%
55%
70%
85%
100%
			Copy
			<div class='jtbProgressBar'>
	<span style='width: 20%;'></span>
</div>
		

Javascript behaviour

Initializing

Javascript behaivours of jtbProgressBars has been written in progress.js plugin of jtb_md.js. To avoid any problematic behaviour on progress bars; do not remove this plugin manually.

Loaders | Spinners

Another progress element in JTB_MD is .jtbLoader, which is a circular formed loading area that shows the loading process.

This part is integrated from the Pure Css Loader by Nabuaki Honma. We are grateful for your efforts.
			Copy
			<div class='jtbContainer_15px' style='position: relative;'>
	<div class='jtbLoader' type='1'>
		<span></span>
	</div>
</div>
<div class='jtbContainer_15px' style='position: relative;'>
	<div class='jtbLoader' type='2'>
		<span></span>
	</div>
</div>
<div class='jtbContainer_15px' style='position: relative;'>
	<div class='jtbLoader' type='3'>
		<span></span>
	</div>
</div>

<div class='jtbContainer_15px' style='position: relative;'>
	<div class='jtbLoader' type='4'>
		<span></span>
	</div>
</div>
<div class='jtbContainer_15px' style='position: relative;'>
	<div class='jtbLoader' type='5'>
		<span></span>
	</div>
</div>
<div class='jtbContainer_15px' style='position: relative;'>
	<div class='jtbLoader' type='6'>
		<span></span>
	</div>
</div>
		

Coloring Spinners

There are multiple colors available for the .jtbProgressBar. You can create your own or use one of the following:

.jtbLoaderNavy

.jtbLoaderBlue

.jtbLoaderGreen

.jtbLoaderRed

.jtbLoaderYellow

.jtbLoaderOrange