Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

updated demo to 0.5.0

  • Loading branch information...
commit c5465c88d0fc068239b4236c2b565c8664bb520e 1 parent 023d000
@minddust authored
Showing with 1,178 additions and 435 deletions.
  1. +134 −0 bootstrap-progressbar.css
  2. +59 −32 bootstrap-progressbar.js
  3. +985 −403 index.html
View
134 bootstrap-progressbar.css
@@ -0,0 +1,134 @@
+/* ========================================================
+ * bootstrap-progressbar v0.5.0
+ * ========================================================
+ * Copyright 2012 minddust.com
+ *
+ * bootstrap-progressbar is published under Apache License,
+ * Version 2.0 (see LICENSE file).
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * ======================================================== */
+
+/* bootstrap-progressbar global styles */
+
+.progress {
+ position: relative;
+}
+.progress .bar {
+ position: absolute;
+ overflow: hidden;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.progress .progressbar-back-text {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ font-size: 12px;
+ text-align: center;
+}
+.progress .progressbar-front-text {
+ display: block;
+ width: 100%;
+ font-size: 12px;
+ text-align: center;
+}
+
+/* bootstrap-progressbar horizontal styles */
+
+.progress.right .bar {
+ right: 0;
+}
+.progress.right .progressbar-front-text {
+ position: absolute;
+ right: 0;
+}
+
+/* bootstrap-progressbar vertical styles */
+
+.progress.vertical {
+ width: 20px;
+ height: 100%;
+ float: left;
+ margin-right: 20px;
+ background-color: #f9f9f9;
+ background-image: -moz-linear-gradient(left, #f5f5f5, #f9f9f9);
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#f5f5f5), to(#f9f9f9));
+ background-image: -webkit-linear-gradient(left, #f5f5f5, #f9f9f9);
+ background-image: -o-linear-gradient(left, #f5f5f5, #f9f9f9);
+ background-image: linear-gradient(to right, #f5f5f5, #f9f9f9);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=1);
+}
+.progress.vertical.bottom {
+ position: relative;
+}
+.progress.vertical.bottom .progressbar-front-text {
+ position: absolute;
+ bottom: 0;
+}
+.progress.vertical .bar {
+ width: 100%;
+ height: 0;
+ background-color: #0480be;
+ background-image: -moz-linear-gradient(left, #149bdf, #0480be);
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#149bdf), to(#0480be));
+ background-image: -webkit-linear-gradient(left, #149bdf, #0480be);
+ background-image: -o-linear-gradient(left, #149bdf, #0480be);
+ background-image: linear-gradient(to right, #149bdf, #0480be);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=1);
+ -webkit-transition: height 0.6s ease;
+ -moz-transition: height 0.6s ease;
+ -o-transition: height 0.6s ease;
+ transition: height 0.6s ease;
+}
+.progress.vertical.bottom .bar {
+ position: absolute;
+ bottom: 0;
+}
+.progress-danger.vertical .bar,
+.progress.vertical .bar-danger {
+ background-color: #c43c35;
+ background-image: -moz-linear-gradient(left, #ee5f5b, #c43c35);
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#ee5f5b), to(#c43c35));
+ background-image: -webkit-linear-gradient(left, #ee5f5b, #c43c35);
+ background-image: -o-linear-gradient(left, #ee5f5b, #c43c35);
+ background-image: linear-gradient(to right, #ee5f5b, #c43c35);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=1);
+}
+.progress-success.vertical .bar,
+.progress.vertical .bar-success {
+ background-color: #57a957;
+ background-image: -moz-linear-gradient(left, #62c462, #57a957);
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#62c462), to(#57a957));
+ background-image: -webkit-linear-gradient(left, #62c462, #57a957);
+ background-image: -o-linear-gradient(left, #62c462, #57a957);
+ background-image: linear-gradient(to right, #62c462, #57a957);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=1);
+}
+.progress-info.vertical .bar,
+.progress.vertical .bar-info {
+ background-color: #339bb9;
+ background-image: -moz-linear-gradient(left, #5bc0de, #339bb9);
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#5bc0de), to(#339bb9));
+ background-image: -webkit-linear-gradient(left, #5bc0de, #339bb9);
+ background-image: -o-linear-gradient(left, #5bc0de, #339bb9);
+ background-image: linear-gradient(to right, #5bc0de, #339bb9);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=1);
+}
+.progress-warning.vertical .bar,
+.progress.vertical .bar-warning {
+ background-color: #f89406;
+ background-image: -moz-linear-gradient(left, #fbb450, #f89406);
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#fbb450), to(#f89406));
+ background-image: -webkit-linear-gradient(left, #fbb450, #f89406);
+ background-image: -o-linear-gradient(left, #fbb450, #f89406);
+ background-image: linear-gradient(to right, #fbb450, #f89406);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=1);
+}
View
91 bootstrap-progressbar.js
@@ -1,5 +1,5 @@
/* ========================================================
- * bootstrap-progressbar v0.4.6
+ * bootstrap-progressbar v0.5.0
* ========================================================
* Copyright 2012 minddust.com
*
@@ -34,10 +34,13 @@
percentage = $this.attr('data-percentage'),
amount_part = $this.attr('data-amount-part'),
amount_total = $this.attr('data-amount-total'),
+ is_vertical,
update,
done,
fail;
+ is_vertical = $parent.hasClass('vertical');
+
update = (options.update && typeof(options.update) === 'function') ? options.update : $.fn.progressbar.defaults.update;
done = (options.done && typeof(options.done) === 'function') ? options.done : $.fn.progressbar.defaults.done;
fail = (options.fail && typeof(options.fail) === 'function') ? options.fail : $.fn.progressbar.defaults.fail;
@@ -56,41 +59,67 @@
}
}
- if (options.display_text === $.fn.progressbar.display_text.center && !$front && !$back) {
- $parent.css('position', 'relative');
- $this.css({
- 'position': 'absolute',
- 'float': 'left',
- 'overflow': 'hidden',
- '-webkit-border-radius': options.border_radius,
- '-moz-border-radius': options.border_radius,
- 'border-radius': options.border_radius
- });
-
- $parent.prepend('<span class="progressbar-back-text" style="position:absolute;width:100%;text-align:center"></span>');
- $this.prepend('<span class="progressbar-front-text" style="display:block;text-align:center"></span>');
- this.back = $back = $parent.find('.progressbar-back-text'),
- this.front = $front = $parent.find('.progressbar-front-text');
- $front.css('width', $parent.css('width'));
- $(window).resize(function() {
- $front.css('width', $parent.css('width'));
- }); // normal resizing would brick the structure because width is in px
+ if (options.display_text === $.fn.progressbar.display_text.center && !$front && !$back) {
+ this.back = $back = $('<span>').addClass('progressbar-back-text');
+ this.front = $front = $('<span>').addClass('progressbar-front-text');
+
+ $parent.prepend($back);
+ $this.prepend($front);
+
+ var parent_size;
+
+ if (is_vertical) {
+ parent_size = $parent.css('height');
+ $back.css('height', parent_size);
+ $back.css('line-height', parent_size);
+ $front.css('height', parent_size);
+ $front.css('line-height', parent_size);
+
+ $(window).resize(function() {
+ parent_size = $parent.css('height');
+ $back.css('height', parent_size);
+ $back.css('line-height', parent_size);
+ $front.css('height', parent_size);
+ $front.css('line-height', parent_size);
+ }); // normal resizing would brick the structure because width is in px
+ }
+ else {
+ parent_size = $parent.css('width');
+ $front.css('width', parent_size);
+
+ $(window).resize(function() {
+ parent_size = $parent.css('width');
+ $front.css('width', parent_size);
+ }); // normal resizing would brick the structure because width is in px
+ }
}
setTimeout(function() {
- $this.css('width', percentage+'%');
-
var current_percentage,
current_value,
- this_width,
- parent_width,
+ this_size,
+ parent_size,
text;
+ if (is_vertical) {
+ $this.css('height', percentage+'%');
+ }
+ else {
+ $this.css('width', percentage+'%');
+ }
+
var progress = setInterval(function() {
- this_width = $this.width();
- parent_width = $parent.width();
- current_percentage = Math.round(100 * this_width / parent_width);
- current_value = Math.round(this_width / parent_width * amount_total);
+ if (is_vertical) {
+ this_size = $this.height();
+ parent_size = $parent.height();
+ }
+ else {
+ this_size = $this.width();
+ parent_size = $parent.width();
+ }
+
+ current_percentage = Math.round(100 * this_size / parent_size);
+ current_value = Math.round(this_size / parent_size * amount_total);
if (current_percentage >= percentage) {
current_percentage = percentage;
@@ -102,10 +131,10 @@
if (options.display_text !== $.fn.progressbar.display_text.none) {
text = options.use_percentage ? (current_percentage +'%') : (current_value + ' / ' + amount_total);
- if (options.display_text === $.fn.progressbar.display_text.filled){
+ if (options.display_text === $.fn.progressbar.display_text.filled){
$this.text(text);
}
- else if (options.display_text === $.fn.progressbar.display_text.center) {
+ else if (options.display_text === $.fn.progressbar.display_text.center) {
$back.text(text);
$front.text(text);
}
@@ -113,7 +142,6 @@
update(current_percentage);
}, options.refresh_speed);
-
}, options.transition_delay);
}
};
@@ -147,7 +175,6 @@
refresh_speed: 50,
display_text: $.fn.progressbar.display_text.none,
use_percentage: true,
- border_radius: '4px',
update: $.noop,
done: $.noop,
fail: $.noop
View
1,388 index.html
@@ -2,443 +2,1025 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <title>bootstrap-progressbar.js 0.4.6</title>
+ <title>bootstrap-progressbar.js 0.5.0</title>
+
+ <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
- <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
+ <link rel="stylesheet" type="text/css" href="bootstrap-progressbar.css">
<style type="text/css">
- .progress .bar.two-sec-ease-in-out {
- -webkit-transition: width 2s ease-in-out;
- -moz-transition: width 2s ease-in-out;
- -ms-transition: width 2s ease-in-out;
- -o-transition: width 2s ease-in-out;
- transition: width 2s ease-in-out;
+ .progress .bar.six-sec-ease-in-out {
+ -webkit-transition: width 6s ease-in-out;
+ -moz-transition: width 6s ease-in-out;
+ -ms-transition: width 6s ease-in-out;
+ -o-transition: width 6s ease-in-out;
+ transition: width 6s ease-in-out;
+ }
+ .progress.vertical .bar.six-sec-ease-in-out {
+ -webkit-transition: height 6s ease-in-out;
+ -moz-transition: height 6s ease-in-out;
+ -ms-transition: height 6s ease-in-out;
+ -o-transition: height 6s ease-in-out;
+ transition: height 6s ease-in-out;
+ }
+ .progress.wide {
+ width: 60px;
}
- .progress .bar.four-sec-ease-in-out {
- -webkit-transition: width 4s ease-in-out;
- -moz-transition: width 4s ease-in-out;
- -ms-transition: width 4s ease-in-out;
- -o-transition: width 4s ease-in-out;
- transition: width 4s ease-in-out;
+ .vertical-progressbar-span {
+ height: 100px;
}
</style>
<script>
$(document).ready(function() {
- $('.progress .bar.no-text-1').progressbar();
- $('.progress .bar.text-filled-1').progressbar({
- display_text: 1
+ $('#h-default-trigger').on('click', function(event) {
+ $('.progress .bar.text-no-1').progressbar();
+ $('.progress .bar.text-filled-1').progressbar({
+ display_text: 1
+ });
+ $('.progress .bar.text-centered-1').progressbar({
+ display_text: 2
+ });
});
- $('.progress .bar.text-center-1').progressbar({
- display_text: 2
+ $('#h-right-trigger').on('click', function(event) {
+ $('.progress .bar.text-no-2').progressbar();
+ $('.progress .bar.text-filled-2').progressbar({
+ display_text: 1
+ });
+ $('.progress .bar.text-centered-2').progressbar({
+ display_text: 2
+ });
});
- $('.progress .bar.no-text-2').progressbar({
- transition_delay: 1500
+ $('#h-delay-trigger').on('click', function(event) {
+ $('.progress .bar.text-no-3').progressbar({
+ transition_delay: 1500
+ });
+ $('.progress .bar.text-filled-3').progressbar({
+ transition_delay: 1500,
+ display_text: 1
+ });
+ $('.progress .bar.text-centered-3').progressbar({
+ transition_delay: 1500,
+ display_text: 2
+ });
});
- $('.progress .bar.text-filled-2').progressbar({
- transition_delay: 1500,
- display_text: 1
+ $('#h-value-trigger').on('click', function(event) {
+ $('.progress .bar.text-no-4').progressbar({
+ use_percentage: false
+ });
+ $('.progress .bar.text-filled-4').progressbar({
+ use_percentage: false,
+ display_text: 1
+ });
+ $('.progress .bar.text-centered-4').progressbar({
+ use_percentage: false,
+ display_text: 2
+ });
});
- $('.progress .bar.text-center-2').progressbar({
- transition_delay: 1500,
- display_text: 2
+ $('#h-transition-speed-trigger').on('click', function(event) {
+ $('.progress .bar.text-no-5').progressbar({
+ use_percentage: false,
+ refresh_speed: 500
+ });
+ $('.progress .bar.text-filled-5').progressbar({
+ use_percentage: false,
+ refresh_speed: 500,
+ display_text: 1
+ });
+ $('.progress .bar.text-centered-5').progressbar({
+ use_percentage: false,
+ refresh_speed: 500,
+ display_text: 2
+ });
});
- $('.progress .bar.no-text-3').progressbar({
- transition_delay: 4000,
- refresh_speed: 200,
- use_percentage: false
+ $('#h-callback-trigger').on('click', function(event) {
+ $('.progress .bar.text-centered-6-1').progressbar({
+ update: function(current_percentage) { $('#h-callback-update-1').text(current_percentage); },
+ done: function(current_percentage) { $('#h-callback-done-1').text('done!'); },
+ display_text: 2
+ });
+ $('.progress .bar.text-centered-6-2').progressbar({
+ update: function(current_percentage) { $('#h-callback-update-2').text(current_percentage); },
+ done: function(current_percentage) { $('#h-callback-done-2').text('done!'); },
+ display_text: 2
+ });
+ $('.progress .bar.text-centered-6-3').progressbar({
+ update: function(current_percentage) { $('#h-callback-update-3').text(current_percentage); },
+ done: function(current_percentage) { $('#h-callback-done-3').text('done!'); },
+ display_text: 2
+ });
+ $('.progress .bar.text-centered-6-4').progressbar({
+ update: function(current_percentage) { $('#h-callback-update-4').text(current_percentage); },
+ done: function(current_percentage) { $('#h-callback-done-4').text('done!'); },
+ display_text: 2
+ });
});
- $('.progress .bar.text-filled-3').progressbar({
- transition_delay: 4000,
- refresh_speed: 200,
- use_percentage: false,
- display_text: 1
+ $('#h-error-trigger').on('click', function(event) {
+ $('.progress .bar.text-centered-7-1').progressbar({
+ fail: function(error_message) { $('#h-error-fail-1').text(error_message); },
+ use_percentage: false,
+ display_text: 2
+ });
+ $('.progress .bar.text-centered-7-2').progressbar({
+ fail: function(error_message) { $('#h-error-fail-2').text(error_message); },
+ display_text: 2
+ });
});
- $('.progress .bar.text-center-3').progressbar({
- transition_delay: 4000,
- refresh_speed: 200,
- use_percentage: false,
- display_text: 2
+ $('#v-default-trigger').on('click', function(event) {
+ $('.progress .bar.text-no-8').progressbar();
+ $('.progress .bar.text-filled-8').progressbar({
+ display_text: 1
+ });
+ $('.progress .bar.text-centered-8').progressbar({
+ display_text: 2
+ });
});
- $('.progress .bar.text-center-4-1').progressbar({
- transition_delay: 8500,
- display_text: 2,
- update: function(current_percentage) { $('#update-1').text(current_percentage); },
- done: function(current_percentage) { $('#done-1').text('done!'); }
+ $('#v-right-trigger').on('click', function(event) {
+ $('.progress .bar.text-no-9').progressbar();
+ $('.progress .bar.text-filled-9').progressbar({
+ display_text: 1
+ });
+ $('.progress .bar.text-centered-9').progressbar({
+ display_text: 2
+ });
});
- $('.progress .bar.text-center-4-2').progressbar({
- transition_delay: 8500,
- display_text: 2,
- update: function(current_percentage) { $('#update-2').text(current_percentage); },
- done: function(current_percentage) { $('#done-2').text('done!'); }
+ $('#v-delay-trigger').on('click', function(event) {
+ $('.progress .bar.text-no-10').progressbar({
+ transition_delay: 1500
+ });
+ $('.progress .bar.text-filled-10').progressbar({
+ transition_delay: 1500,
+ display_text: 1
+ });
+ $('.progress .bar.text-centered-10').progressbar({
+ transition_delay: 1500,
+ display_text: 2
+ });
});
- $('.progress .bar.text-center-4-3').progressbar({
- transition_delay: 8500,
- display_text: 2,
- update: function(current_percentage) { $('#update-3').text(current_percentage); },
- done: function(current_percentage) { $('#done-3').text('done!'); }
+ $('#v-value-trigger').on('click', function(event) {
+ $('.progress .bar.text-no-11').progressbar({
+ use_percentage: false
+ });
+ $('.progress .bar.text-filled-11').progressbar({
+ use_percentage: false,
+ display_text: 1
+ });
+ $('.progress .bar.text-centered-11').progressbar({
+ use_percentage: false,
+ display_text: 2
+ });
});
- $('.progress .bar.text-center-4-4').progressbar({
- transition_delay: 8500,
- display_text: 2,
- update: function(current_percentage) { $('#update-4').text(current_percentage); },
- done: function(current_percentage) { $('#done-4').text('done!'); }
+ $('#v-transition-speed-trigger').on('click', function(event) {
+ $('.progress .bar.text-no-12').progressbar({
+ use_percentage: false,
+ refresh_speed: 500
+ });
+ $('.progress .bar.text-filled-12').progressbar({
+ use_percentage: false,
+ refresh_speed: 500,
+ display_text: 1
+ });
+ $('.progress .bar.text-centered-12').progressbar({
+ use_percentage: false,
+ refresh_speed: 500,
+ display_text: 2
+ });
});
- $('.progress .bar.text-center-5-1').progressbar({
- transition_delay: 13000,
- use_percentage: false,
- display_text: 2,
- fail: function(error_message) { $('#fail-1').text(error_message); }
+ $('#v-callback-trigger').on('click', function(event) {
+ $('.progress .bar.text-centered-13-1').progressbar({
+ update: function(current_percentage) { $('#v-callback-update-1').text(current_percentage); },
+ done: function(current_percentage) { $('#v-callback-done-1').text('done!'); },
+ display_text: 2
+ });
+ $('.progress .bar.text-centered-13-2').progressbar({
+ update: function(current_percentage) { $('#v-callback-update-2').text(current_percentage); },
+ done: function(current_percentage) { $('#v-callback-done-2').text('done!'); },
+ display_text: 2
+ });
+ $('.progress .bar.text-centered-13-3').progressbar({
+ update: function(current_percentage) { $('#v-callback-update-3').text(current_percentage); },
+ done: function(current_percentage) { $('#v-callback-done-3').text('done!'); },
+ display_text: 2
+ });
+ $('.progress .bar.text-centered-13-4').progressbar({
+ update: function(current_percentage) { $('#v-callback-update-4').text(current_percentage); },
+ done: function(current_percentage) { $('#v-callback-done-4').text('done!'); },
+ display_text: 2
+ });
});
- $('.progress .bar.text-center-5-2').progressbar({
- transition_delay: 13000,
- display_text: 2,
- fail: function(error_message) { $('#fail-2').text(error_message); }
+ $('#v-error-trigger').on('click', function(event) {
+ $('.progress .bar.text-centered-14-1').progressbar({
+ fail: function(error_message) { $('#v-error-fail-1').text(error_message); },
+ use_percentage: false,
+ display_text: 2
+ });
+ $('.progress .bar.text-centered-14-2').progressbar({
+ fail: function(error_message) { $('#v-error-fail-2').text(error_message); },
+ display_text: 2
+ });
});
-
- $('#trigger-25').on('click', function(event) {
-                $('.progress .bar.no-text-6').each(function(index) {
-                    $(this).attr('data-percentage', "25");
-                });
-                $('.progress .bar.text-filled-6').each(function(index) {
-                    $(this).attr('data-percentage', "25");
-                });
-                $('.progress .bar.text-center-6').each(function(index) {
-                    $(this).attr('data-percentage', "25");
-                });
-
- $('.progress .bar.no-text-6').progressbar();
- $('.progress .bar.text-filled-6').progressbar({
- display_text: 1
- });
- $('.progress .bar.text-center-6').progressbar({
- display_text: 2
- });
- });
- $('#trigger-54').on('click', function(event) {
-                $('.progress .bar.no-text-6').each(function(index) {
-                    $(this).attr('data-percentage', "54");
-                });
-                $('.progress .bar.text-filled-6').each(function(index) {
-                    $(this).attr('data-percentage', "54");
-                });
-                $('.progress .bar.text-center-6').each(function(index) {
-                    $(this).attr('data-percentage', "54");
-                });
-
- $('.progress .bar.no-text-6').progressbar();
- $('.progress .bar.text-filled-6').progressbar({
- display_text: 1
- });
- $('.progress .bar.text-center-6').progressbar({
- display_text: 2
- });
- });
- $('#trigger-100').on('click', function(event) {
-                $('.progress .bar.no-text-6').each(function(index) {
-                    $(this).attr('data-percentage', "100");
-                });
-                $('.progress .bar.text-filled-6').each(function(index) {
-                    $(this).attr('data-percentage', "100");
-                });
-                $('.progress .bar.text-center-6').each(function(index) {
-                    $(this).attr('data-percentage', "100");
-                });
-
- $('.progress .bar.no-text-6').progressbar();
- $('.progress .bar.text-filled-6').progressbar({
- display_text: 1
- });
- $('.progress .bar.text-center-6').progressbar({
- display_text: 2
- });
- });
});
</script>
</head>
-<body style="margin:20px">
+<body data-spy="scroll" data-target="#sidebarnav" style="margin:20px">
<a href="http://github.com/minddust"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
<div class="container">
-<div class="row">
- <div class="span12">
- <h1>bootstrap-progressbar 0.4.6</h1>
- </div>
-</div>
-<br>
-<div class="row">
- <div class="span3">
- <h3>Options</h3>
- <ul>
- <li>default</li>
- </ul>
- <h3>Trigger</h3>
- <ul>
- <li><a href="#" id="trigger-25">click here for 25%</a></li>
- <li><a href="#" id="trigger-54">click here for 54%</a></li>
- <li><a href="#" id="trigger-100">click here for 100%</a></li>
- </ul>
- </div>
- <div class="span3">
- <h3>without text</h3>
- <div class="progress progress-info">
- <div class="bar no-text-6"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar no-text-6"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar no-text-6"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar no-text-6"></div>
- </div>
- </div>
- <div class="span3">
- <h3>text on filled bar</h3>
- <div class="progress progress-info">
- <div class="bar text-filled-6"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar text-filled-6"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar text-filled-6"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar text-filled-6"></div>
- </div>
- </div>
- <div class="span3">
- <h3>text on center</h3>
- <div class="progress progress-info">
- <div class="bar text-center-6"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar text-center-6"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar text-center-6"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar text-center-6"></div>
- </div>
- </div>
-</div>
-<div class="row">
- <div class="span3">
- <h3>Options</h3>
- <ul>
- <li>default</li>
- </ul>
- </div>
- <div class="span3">
- <h3>without text</h3>
- <div class="progress progress-info">
- <div class="bar no-text-1" data-percentage="25"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar no-text-1" data-percentage="50"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar no-text-1" data-percentage="75"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar no-text-1" data-percentage="100"></div>
- </div>
- </div>
- <div class="span3">
- <h3>text on filled bar</h3>
- <div class="progress progress-info">
- <div class="bar text-filled-1" data-percentage="25"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar text-filled-1" data-percentage="50"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar text-filled-1" data-percentage="75"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar text-filled-1" data-percentage="100"></div>
- </div>
- </div>
- <div class="span3">
- <h3>text on center</h3>
- <div class="progress progress-info">
- <div class="bar text-center-1" data-percentage="25"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar text-center-1" data-percentage="49"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar text-center-1" data-percentage="52"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar text-center-1" data-percentage="75"></div>
- </div>
- </div>
-</div>
-<div class="row">
- <div class="span3">
- <h3>Options</h3>
- <ul>
- <li>transition_delay: 1500</li>
- <li>transition: width 2s ease-in-out</li>
- </ul>
- </div>
- <div class="span3">
- <h3>without text</h3>
- <div class="progress progress-info">
- <div class="bar no-text-2 two-sec-ease-in-out" data-percentage="25"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar no-text-2 two-sec-ease-in-out" data-percentage="50"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar no-text-2 two-sec-ease-in-out" data-percentage="75"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar no-text-2 two-sec-ease-in-out" data-percentage="100"></div>
- </div>
- </div>
- <div class="span3">
- <h3>text on filled bar</h3>
- <div class="progress progress-info">
- <div class="bar text-filled-2 two-sec-ease-in-out" data-percentage="25"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar text-filled-2 two-sec-ease-in-out" data-percentage="50"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar text-filled-2 two-sec-ease-in-out" data-percentage="75"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar text-filled-2 two-sec-ease-in-out" data-percentage="100"></div>
- </div>
- </div>
- <div class="span3">
- <h3>text on center</h3>
- <div class="progress progress-info">
- <div class="bar text-center-2 two-sec-ease-in-out" data-percentage="25"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar text-center-2 two-sec-ease-in-out" data-percentage="49"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar text-center-2 two-sec-ease-in-out" data-percentage="52"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar text-center-2 two-sec-ease-in-out" data-percentage="75"></div>
- </div>
- </div>
-</div>
-<div class="row">
- <div class="span3">
- <h3>Options</h3>
- <ul>
- <li>transition_delay: 4000</li>
- <li>refresh_speed: 200</li>
- <li>use_percentage: false</li>
- <li>transition: width 4s ease-in-out</li>
- </ul>
- </div>
- <div class="span3">
- <h3>without text</h3>
- <div class="progress progress-info">
- <div class="bar no-text-3 four-sec-ease-in-out" data-amount-part="1337" data-amount-total="9000"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar no-text-3 four-sec-ease-in-out" data-amount-part="2500" data-amount-total="5000"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar no-text-3 four-sec-ease-in-out" data-amount-part="75" data-amount-total="100"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar no-text-3 four-sec-ease-in-out" data-amount-part="10" data-amount-total="10"></div>
+ <div class="row-fluid">
+ <div class="span3">
+ <div id="sidebarnav" class="well affix" style="max-width: 340px; padding: 8px 0;">
+ <ul class="nav nav-list">
+ <li class="nav-header">horizontal progressbar</li>
+ <li><a href="#h-default">default</a></li>
+ <li><a href="#h-right">right</a></li>
+ <li><a href="#h-delay">delay</a></li>
+ <li><a href="#h-value">value</a></li>
+ <li><a href="#h-transition-speed">transition & speed</a></li>
+ <li><a href="#h-callback">callback</a></li>
+ <li><a href="#h-error">error</a></li>
+ <li class="nav-header">vertical progressbar</li>
+ <li><a href="#v-default">default</a></li>
+ <li><a href="#v-bottom">bottom</a></li>
+ <li><a href="#v-delay">delay</a></li>
+ <li><a href="#v-value">value</a></li>
+ <li><a href="#v-transition-speed">transition & speed</a></li>
+ <li><a href="#v-callback">callback</a></li>
+ <li><a href="#v-error">error</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="span3">
- <h3>text on filled bar</h3>
- <div class="progress progress-info">
- <div class="bar text-filled-3 four-sec-ease-in-out" data-amount-part="25" data-amount-total="100"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar text-filled-3 four-sec-ease-in-out" data-amount-part="2500" data-amount-total="5000"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar text-filled-3 four-sec-ease-in-out" data-amount-part="75" data-amount-total="100"></div>
+ <div class="span9">
+ <h1>bootstrap-progressbar 0.5.0</h1>
+ <br><br>
+ <section id="h-default">
+ <div class="page-header">
+ <h2>default</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>default</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="h-default-trigger">start</a></li>
+ </ul>
+ </div>
+ <div class="span3">
+ <h3>no text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-no-1" data-percentage="25"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-no-1" data-percentage="50"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-no-1" data-percentage="75"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-no-1" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3">
+ <h3>filled text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-filled-1" data-percentage="25"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-filled-1" data-percentage="50"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-filled-1" data-percentage="75"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-filled-1" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3">
+ <h3>centered text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-centered-1" data-percentage="25"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-centered-1" data-percentage="50"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-centered-1" data-percentage="75"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-centered-1" data-percentage="100"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="h-right">
+ <div class="page-header">
+ <h2>right</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>right css</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="h-right-trigger">start</a></li>
+ </ul>
+ </div>
+ <div class="span3">
+ <h3>no text</h3>
+ <div class="progress right progress-info">
+ <div class="bar text-no-2" data-percentage="25"></div>
+ </div>
+ <div class="progress right progress-success">
+ <div class="bar text-no-2" data-percentage="50"></div>
+ </div>
+ <div class="progress right progress-warning">
+ <div class="bar text-no-2" data-percentage="75"></div>
+ </div>
+ <div class="progress right progress-danger">
+ <div class="bar text-no-2" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3">
+ <h3>filled text</h3>
+ <div class="progress right progress-info">
+ <div class="bar text-filled-2" data-percentage="25"></div>
+ </div>
+ <div class="progress right progress-success">
+ <div class="bar text-filled-2" data-percentage="50"></div>
+ </div>
+ <div class="progress right progress-warning">
+ <div class="bar text-filled-2" data-percentage="75"></div>
+ </div>
+ <div class="progress right progress-danger">
+ <div class="bar text-filled-2" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3">
+ <h3>centered text</h3>
+ <div class="progress right progress-info">
+ <div class="bar text-centered-2" data-percentage="25"></div>
+ </div>
+ <div class="progress right progress-success">
+ <div class="bar text-centered-2" data-percentage="50"></div>
+ </div>
+ <div class="progress right progress-warning">
+ <div class="bar text-centered-2" data-percentage="75"></div>
+ </div>
+ <div class="progress right progress-danger">
+ <div class="bar text-centered-2" data-percentage="100"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="h-delay">
+ <div class="page-header">
+ <h2>delay</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>transition_delay: 1500</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="h-delay-trigger">start</a></li>
+ </ul>
+ </div>
+ <div class="span3">
+ <h3>no text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-no-3" data-percentage="25"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-no-3" data-percentage="50"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-no-3" data-percentage="75"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-no-3" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3">
+ <h3>filled text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-filled-3" data-percentage="25"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-filled-3" data-percentage="50"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-filled-3" data-percentage="75"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-filled-3" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3">
+ <h3>centered text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-centered-3" data-percentage="25"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-centered-3" data-percentage="50"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-centered-3" data-percentage="75"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-centered-3" data-percentage="100"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="h-value">
+ <div class="page-header">
+ <h2>value</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>use_percentage: false</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="h-value-trigger">start</a></li>
+ </ul>
+ </div>
+ <div class="span3">
+ <h3>no text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-no-4" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-no-4" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-no-4" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-no-4" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ <div class="span3">
+ <h3>filled text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-filled-4" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-filled-4" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-filled-4" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-filled-4" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ <div class="span3">
+ <h3>centered text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-centered-4" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-centered-4" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-centered-4" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-centered-4" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="h-transition-speed">
+ <div class="page-header">
+ <h2>transition & speed</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>refresh_speed: 500</li>
+ <li>use_percentage: false</li>
+ <li>transition: width 6s ease-in-out</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="h-transition-speed-trigger">start</a></li>
+ </ul>
+ </div>
+ <div class="span3">
+ <h3>no text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-no-5 six-sec-ease-in-out" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-no-5 six-sec-ease-in-out" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-no-5 six-sec-ease-in-out" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-no-5 six-sec-ease-in-out" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ <div class="span3">
+ <h3>filled text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-filled-5 six-sec-ease-in-out" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-filled-5 six-sec-ease-in-out" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-filled-5 six-sec-ease-in-out" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-filled-5 six-sec-ease-in-out" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ <div class="span3">
+ <h3>centered text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-centered-5 six-sec-ease-in-out" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-centered-5 six-sec-ease-in-out" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-centered-5 six-sec-ease-in-out" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-centered-5 six-sec-ease-in-out" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="h-callback">
+ <div class="page-header">
+ <h2>callback</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>transition: width 6s ease-in-out</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="h-callback-trigger">start</a></li>
+ </ul>
+ <h3>callback</h3>
+ <ul>
+ <li>update: <span id="h-callback-update-1"></span> <span id="h-callback-done-1" style="color:green;"></span></li>
+ <li>update: <span id="h-callback-update-2"></span> <span id="h-callback-done-2" style="color:green;"></span></li>
+ <li>update: <span id="h-callback-update-3"></span> <span id="h-callback-done-3" style="color:green;"></span></li>
+ <li>update: <span id="h-callback-update-4"></span> <span id="h-callback-done-4" style="color:green;"></span></li>
+ </ul>
+ </div>
+ <div class="span9">
+ <h3>centered text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-centered-6-1 six-sec-ease-in-out" data-percentage="25"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-centered-6-2 six-sec-ease-in-out" data-percentage="50"></div>
+ </div>
+ <div class="progress progress-warning">
+ <div class="bar text-centered-6-3 six-sec-ease-in-out" data-percentage="75"></div>
+ </div>
+ <div class="progress progress-danger">
+ <div class="bar text-centered-6-4 six-sec-ease-in-out" data-percentage="100"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="h-error">
+ <div class="page-header">
+ <h2>error</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>default</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="h-error-trigger">start</a></li>
+ </ul>
+ <h3>callback</h3>
+ <ul>
+ <li>fail: <span id="h-error-fail-1" style="color:red;"></span></li>
+ <li>fail: <span id="h-error-fail-2" style="color:red;"></span></li>
+ </ul>
+ </div>
+ <div class="span9">
+ <h3>centered text</h3>
+ <div class="progress progress-info">
+ <div class="bar text-centered-7-1 six-sec-ease-in-out" data-percentage="25"></div>
+ </div>
+ <div class="progress progress-success">
+ <div class="bar text-centered-7-2 six-sec-ease-in-out" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="v-default">
+ <div class="page-header">
+ <h2>default</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>default</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="v-default-trigger">start</a></li>
+ </ul>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>no text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-no-8" data-percentage="25"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-no-8" data-percentage="50"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-no-8" data-percentage="75"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-no-8" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>filled text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-filled-8" data-percentage="25"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-filled-8" data-percentage="50"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-filled-8" data-percentage="75"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-filled-8" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>centered text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-centered-8" data-percentage="25"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-centered-8" data-percentage="50"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-centered-8" data-percentage="75"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-centered-8" data-percentage="100"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="v-bottom">
+ <div class="page-header">
+ <h2>bottom</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>bottom css</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="v-right-trigger">start</a></li>
+ </ul>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>no text</h3>
+ <div class="progress vertical bottom progress-info">
+ <div class="bar text-no-9" data-percentage="25"></div>
+ </div>
+ <div class="progress vertical bottom progress-success">
+ <div class="bar text-no-9" data-percentage="50"></div>
+ </div>
+ <div class="progress vertical bottom progress-warning">
+ <div class="bar text-no-9" data-percentage="75"></div>
+ </div>
+ <div class="progress vertical bottom progress-danger">
+ <div class="bar text-no-9" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>filled text</h3>
+ <div class="progress vertical bottom progress-info">
+ <div class="bar text-filled-9" data-percentage="25"></div>
+ </div>
+ <div class="progress vertical bottom progress-success">
+ <div class="bar text-filled-9" data-percentage="50"></div>
+ </div>
+ <div class="progress vertical bottom progress-warning">
+ <div class="bar text-filled-9" data-percentage="75"></div>
+ </div>
+ <div class="progress vertical bottom progress-danger">
+ <div class="bar text-filled-9" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>centered text</h3>
+ <div class="progress vertical bottom progress-info">
+ <div class="bar text-centered-9" data-percentage="25"></div>
+ </div>
+ <div class="progress vertical bottom progress-success">
+ <div class="bar text-centered-9" data-percentage="50"></div>
+ </div>
+ <div class="progress vertical bottom progress-warning">
+ <div class="bar text-centered-9" data-percentage="75"></div>
+ </div>
+ <div class="progress vertical bottom progress-danger">
+ <div class="bar text-centered-9" data-percentage="100"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="v-delay">
+ <div class="page-header">
+ <h2>delay</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>transition_delay: 1500</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="v-delay-trigger">start</a></li>
+ </ul>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>no text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-no-10" data-percentage="25"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-no-10" data-percentage="50"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-no-10" data-percentage="75"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-no-10" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>filled text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-filled-10" data-percentage="25"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-filled-10" data-percentage="50"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-filled-10" data-percentage="75"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-filled-10" data-percentage="100"></div>
+ </div>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>centered text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-centered-10" data-percentage="25"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-centered-10" data-percentage="50"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-centered-10" data-percentage="75"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-centered-10" data-percentage="100"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="v-value">
+ <div class="page-header">
+ <h2>value</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>use_percentage: false</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="v-value-trigger">start</a></li>
+ </ul>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>no text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-no-11" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-no-11" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-no-11" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-no-11" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>filled text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-filled-11" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-filled-11" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-filled-11" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-filled-11" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>centered text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-centered-11" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-centered-11" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-centered-11" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-centered-11" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="v-transition-speed">
+ <div class="page-header">
+ <h2>transition & speed</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>refresh_speed: 500</li>
+ <li>use_percentage: false</li>
+ <li>transition: width 6s ease-in-out</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="v-transition-speed-trigger">start</a></li>
+ </ul>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>no text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-no-12 six-sec-ease-in-out" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-no-12 six-sec-ease-in-out" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-no-12 six-sec-ease-in-out" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-no-12 six-sec-ease-in-out" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>filled text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-filled-12 six-sec-ease-in-out" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-filled-12 six-sec-ease-in-out" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-filled-12 six-sec-ease-in-out" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-filled-12 six-sec-ease-in-out" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ <div class="span3 vertical-progressbar-span">
+ <h3>centered text</h3>
+ <div class="progress vertical progress-info">
+ <div class="bar text-centered-12 six-sec-ease-in-out" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ <div class="progress vertical progress-success">
+ <div class="bar text-centered-12 six-sec-ease-in-out" data-amount-part="2500" data-amount-total="5000"></div>
+ </div>
+ <div class="progress vertical progress-warning">
+ <div class="bar text-centered-12 six-sec-ease-in-out" data-amount-part="75" data-amount-total="100"></div>
+ </div>
+ <div class="progress vertical progress-danger">
+ <div class="bar text-centered-12 six-sec-ease-in-out" data-amount-part="10" data-amount-total="10"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section id="v-callback">
+ <div class="page-header">
+ <h2>callback</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>transition: width 6s ease-in-out</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="v-callback-trigger">start</a></li>
+ </ul>
+ <h3>callback</h3>
+ <ul>
+ <li>update: <span id="v-callback-update-1"></span> <span id="v-callback-done-1" style="color:green;"></span></li>
+ <li>update: <span id="v-callback-update-2"></span> <span id="v-callback-done-2" style="color:green;"></span></li>
+ <li>update: <span id="v-callback-update-3"></span> <span id="v-callback-done-3" style="color:green;"></span></li>
+ <li>update: <span id="v-callback-update-4"></span> <span id="v-callback-done-4" style="color:green;"></span></li>
+ </ul>
+ </div>
+ <div class="span9 vertical-progressbar-span">
+ <h3>centered text</h3>
+ <div class="progress vertical wide progress-info">
+ <div class="bar text-centered-13-1 six-sec-ease-in-out" data-percentage="25"></div>
+ </div>
+ <div class="progress vertical wide progress-success">
+ <div class="bar text-centered-13-2 six-sec-ease-in-out" data-percentage="50"></div>
+ </div>
+ <div class="progress vertical wide progress-warning">
+ <div class="bar text-centered-13-3 six-sec-ease-in-out" data-percentage="75"></div>
+ </div>
+ <div class="progress vertical wide progress-danger">
+ <div class="bar text-centered-13-4 six-sec-ease-in-out" data-percentage="100"></div>
+ </div>
+ </div>
</div>
- <div class="progress progress-danger">
- <div class="bar text-filled-3 four-sec-ease-in-out" data-amount-part="10" data-amount-total="10"></div>
+ </section>
+ <section id="v-error">
+ <div class="page-header">
+ <h2>error</h2>
+ </div>
+ <div class="row-fluid">
+ <div class="span3">
+ <h3>options</h3>
+ <ul>
+ <li>default</li>
+ </ul>
+ <h3>trigger</h3>
+ <ul>
+ <li><a id="v-error-trigger">start</a></li>
+ </ul>
+ <h3>callback</h3>
+ <ul>
+ <li>fail: <span id="v-error-fail-1" style="color:red;"></span></li>
+ <li>fail: <span id="v-error-fail-2" style="color:red;"></span></li>
+ </ul>
+ </div>
+ <div class="span9 vertical-progressbar-span">
+ <h3>centered text</h3>
+ <div class="progress vertical wide progress-info">
+ <div class="bar text-centered-14-1 six-sec-ease-in-out" data-percentage="25"></div>
+ </div>
+ <div class="progress vertical wide progress-success">
+ <div class="bar text-centered-14-2 six-sec-ease-in-out" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="span3">
- <h3>text on center</h3>
- <div class="progress progress-info">
- <div class="bar text-center-3 four-sec-ease-in-out" data-amount-part="1337" data-amount-total="9000"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar text-center-3 four-sec-ease-in-out" data-amount-part="240" data-amount-total="500"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar text-center-3 four-sec-ease-in-out" data-amount-part="333" data-amount-total="600"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar text-center-3 four-sec-ease-in-out" data-amount-part="7" data-amount-total="10"></div>
- </div>
- </div>
-</div>
-<div class="row">
- <div class="span3">
- <h3>Options</h3>
- <ul>
- <li>transition_delay: 8500</li>
- <li>transition: width 4s ease-in-out</li>
- <li>update: <span id="update-1"></span> <span id="done-1"></span></li>
- <li>update: <span id="update-2"></span> <span id="done-2"></span></li>
- <li>update: <span id="update-3"></span> <span id="done-3"></span></li>
- <li>update: <span id="update-4"></span> <span id="done-4"></span></li>
- </ul>
- </div>
- <div class="span9">
- <h3>text on center</h3>
- <div class="progress progress-info">
- <div class="bar text-center-4-1 four-sec-ease-in-out" data-percentage="25"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar text-center-4-2 four-sec-ease-in-out" data-percentage="50"></div>
- </div>
- <div class="progress progress-warning">
- <div class="bar text-center-4-3 four-sec-ease-in-out" data-percentage="75"></div>
- </div>
- <div class="progress progress-danger">
- <div class="bar text-center-4-4 four-sec-ease-in-out" data-percentage="100"></div>
- </div>
- </div>
-</div>
-<div class="row">
- <div class="span6">
- <h3>Options</h3>
- <ul>
- <li>transition_delay: 13000</li>
- <li>transition: width 4s ease-in-out</li>
- <li>wrong data attributes set</li><br>
- <li>fail callback bar1: <span id="fail-1" style="font-weight: bold; color: red"></span></li>
- <li>fail callback bar2: <span id="fail-2" style="font-weight: bold; color: red"></span></li>
- </ul>
- </div>
- <div class="span6">
- <h3>text on center</h3>
- <div class="progress progress-info">
- <div class="bar text-center-5-1 four-sec-ease-in-out" data-percentage="25"></div>
- </div>
- <div class="progress progress-success">
- <div class="bar text-center-5-2 four-sec-ease-in-out" data-amount-part="333" data-amount-total="600"></div>
- </div>
- </div>
-</div>
</div>
</body>
-</html>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.