Permalink
Browse files

updated demo to 0.5.0

  • Loading branch information...
1 parent 023d000 commit c5465c88d0fc068239b4236c2b565c8664bb520e @minddust committed Aug 29, 2012
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
@@ -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
@@ -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,18 +131,17 @@
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);
}
}
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
Oops, something went wrong.

0 comments on commit c5465c8

Please sign in to comment.