Progress Bars

A progress bar can be used to show a user how long the process will be executed.

For Default progress bar initialization you need insert following structure. Code:

<div class="cssProgress">
	<div class="progress1 cssProgress-active">
		<div class="cssProgress-bar" data-percent="75">
			<span class="cssProgress-label">0%</span>
		</div>
	</div>
</div>

For progress bars Skeleton-FX has 4 predefined styles. Use class .progress1, .progress2, .progress3 or .progress4 for change its appearance. See example below.

Play

With progress bar progress4 you can use 5 predefined sizes, just add class .cssProgress-lg, .cssProgress-2x, .cssProgress-3x, .cssProgress-4x or .cssProgress-5x to the <div> with class .cssProgress-bar. For add background shadow effect use class .cssProgress-glow. Also you can use color modifiers with 4 predefined colors by adding additional class .cssProgress-info, .cssProgress-danger, .cssProgress-success or .cssProgress-warning. See example below.

Play

You can implement Progress Bar structure with your PHP script for getting real-time values.