Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch 'master' of https://github.com/minddust/bootstrap-progre…

  • Loading branch information...
commit 0151602dbe185e37753b4e7f405d9ee6775c0ef7 2 parents 54ae875 + 1d5211b
@minddust authored
Showing with 63 additions and 64 deletions.
  1. +4 −6 CHANGELOG.md
  2. +59 −58 README.md
View
10 CHANGELOG.md
@@ -1,8 +1,6 @@
-=========
-Changelog
-=========
+# Changelog
-0.4.2
-=====
+### 0.4.2
-* started changelog
+ * started changelog
+ * switched to github markdown
View
117 README.md
@@ -1,89 +1,92 @@
-=============================
-bootstrap-progressbar - 0.4.2
-=============================
+# bootstrap-progressbar - 0.4.2
-``bootstrap-progressbar`` is a jQuery_ plugin which extends the basic twitter-bootstrap_ progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or via callback.
+`bootstrap-progressbar` is a [jQuery](http://jquery.com) plugin which extends the basic [twitter-bootstrap](http://twitter.github.com/bootstrap) progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.
-.. _jQuery: http://jquery.com/
-.. _twitter-bootstrap: http://twitter.github.com/bootstrap/
+## Demo
-Demo
-====
+* http://minddust.github.com/bootstrap-progressbar
-* http://minddust.github.com/bootstrap-progressbar/
+## Usage
-Usage
-=====
-
-1. include ``bootstrap-progressbar.js``::
+1. include `bootstrap-progressbar.js`
+ ```html
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
+ ```
-#. activate ``bootstrap-progressbar`` functionality on progressbars of your choice::
+2. activate `bootstrap-progressbar` functionality on progressbars of your choice
+ ```javascript
$(document).ready(function() {
$('.progress .bar').progressbar();
});
+ ```
-#. set the ``data`` attribute and **remove** the ``width`` style attribute (alternatively you can set it to 0)
+3. set the `data` attribute and __remove__ the `width` style attribute (alternatively you can set it to 0)
- 1. ``data-percentage``::
+ 1. `data-percentage`
+ ```html
<div class="progress progress-info">
<div class="bar" data-percentage="75"></div>
</div>
+ ```
- #. ``data-amount-part`` and ``data-amount-total``::
+ 2. `data-amount-part` and `data-amount-total`
- <div class="progress progress-info">
- <div class="bar" data-amount-part="1337" data-amount-total="9000"></div>
- </div>
+ ```html
+ <div class="progress progress-info">
+ <div class="bar" data-amount-part="1337" data-amount-total="9000"></div>
+ </div>
-Customization
-=============
+## Customization
1. text and delay
- simply add additional parameters when activating the script::
-
- $(document).ready(function() {
- $('.progress .bar').progressbar({
- transition_delay: 300
- , refresh_speed: 50
- , display_text: 2
- , use_percentage: true
- , border_radius: '4px'
- , update: doSomethingCool( current_percentage ) { .. }
- , done: doSomethingCool( ) { .. }
- , fail: doSomethingCool( error_message ) { .. }
- });
- });
+ simply add additional parameters when activating the script
- * ``transition_delay`` is the time in milliseconds until the animation starts
- * ``refresh_speed`` is the time in milliseconds which will elapse between every text refresh / callback call
- * ``display_text`` determines whether the text will be displayed
+ ```javascript
+ $(document).ready(function() {
+ $('.progress .bar').progressbar({
+ transition_delay: 300
+ , refresh_speed: 50
+ , display_text: 2
+ , use_percentage: true
+ , border_radius: '4px'
+ , update: doSomethingCool( current_percentage ) { .. }
+ , done: doSomethingCool( ) { .. }
+ , fail: doSomethingCool( error_message ) { .. }
+ });
+ });
+ ```
+ * `transition_delay` is the time in milliseconds until the animation starts
+ * `refresh_speed` is the time in milliseconds which will elapse between every text refresh / callback call
+ * `display_text` determines whether the text will be displayed
- * ``0`` **no text** *(this mode doesn't change any css / html)*
- * ``1`` **text on filled bar** *(this mode doesn't change any css / html)*
- * ``2`` **text on center** *(this mode changes css / html due to styling requirements)*
- * ``use_percentage`` determines whether the text will be displayed in percent or amount
- * ``border_radius`` hook to change the border radius of the progressbar
+ * `0` __no text__ *(this mode doesn't change any css / html)*
+ * `1` __text on filled bar__ *(this mode doesn't change any css / html)*
+ * `2` __text on center__ *(this mode changes css / html due to styling requirements)*
+ * `use_percentage` determines whether the text will be displayed in percent or amount
+ * `border_radius` hook to change the border radius of the progressbar
- * **you only have to set this if you are using centered text AND have overwritten the default bootstrap value**
- * ``update`` hook where you can grab the actual percentage value
- * ``done`` hook which indicates when progressbar is filled to the given value
- * ``fail`` hook where you can grab an error message when something went wrong
+ * __you only have to set this if you are using centered text AND have overwritten the default bootstrap value__
+ * `update` hook where you can grab the actual percentage value
+ * `done` hook which indicates when progressbar is filled to the given value
+ * `fail` hook where you can grab an error message when something went wrong
-#. to change the animation itself you have to overwrite either less or css
+2. animation
- * less::
+ to change the animation itself you have to overwrite either less or css
+ * less
+ ```css
.progress .bar {
.transition(width 2s ease-in-out);
}
-
- * css::
-
+ ```
+ * css
+
+ ```css
.progress .bar {
-webkit-transition: width 2s ease-in-out;
-moz-transition: width 2s ease-in-out;
@@ -91,12 +94,10 @@ Customization
-o-transition: width 2s ease-in-out;
transition: width 2s ease-in-out;
}
+ ```
-License
-=======
-
-Copyright 2012 minddust.com_
+## License
-.. _minddust.com: http://www.minddust.com/
+Copyright 2012 [minddust.com](http://www.minddust.com)
bootstrap-progressbar is published under Apache License, Version 2.0 (see LICENSE file).
Please sign in to comment.
Something went wrong with that request. Please try again.