@extends('layout.master') @section('title', 'Progress Bars') @section('parentPageTitle', 'UI Elements') @section('content')

Default Progress Bars

60% Complete
60% Complete (warning)
60% Complete (success)
60% Complete (danger)

Sizes
60% Complete
60% Complete (warning)
60% Complete (success)
60% Complete (danger)

Progress Bars Progress Bars based on Bootstrap-Progressbar plugin

Percentage Format
Number Format
Custom Format

Other Styles
45% Complete

Stacked Progress Bar
45% Complete (success)
20% Complete (warning)
10% Complete (danger)
Vertical Progress Bars

Gredients Progress Bars

60% Complete
60% Complete (warning)
60% Complete (success)
60% Complete (danger)

Sizes
60% Complete
60% Complete (warning)
60% Complete (success)
60% Complete (danger)
@stop @section('page-script') $(function() { $('#progress-format1 .progress-bar').progressbar({ display_text: 'fill' }); $('#progress-format2 .progress-bar').progressbar({ display_text: 'fill', use_percentage: false }); $('#progress-custom-format .progress-bar').progressbar({ display_text: 'fill', use_percentage: false, amount_format: function(p, t) { return p + ' of ' + t; } }); $('#progress-striped .progress-bar, #progress-striped-active .progress-bar, #progress-stacked .progress-bar').progressbar({ display_text: 'fill' }); $('.progress.vertical .progress-bar').progressbar(); $('.progress.vertical.wide .progress-bar').progressbar({ display_text: 'fill' }); }); @stop