AngularJS Omni Bar
Native AngularJS multi-purpose bar you can use to display progress or completion.
Version: 1.0.0
{{value1}}%
View on Github
Features
- Pure AngularJS. Can be easily combined with other Javascript libraries such as jQuery, Twitter Bootstrap, etc.
- Using simple CSS3 animation.
- Very easy to use & configurable.
Usage
Include the required files
Load the omni-bar directive into your AngularJS app, such as:
var myApp = angular.module( 'myApp', [ 'isteven-omni-bar' ] );
In your view, set the directive as an attribute
... or as an element, but be careful with browser compatibility.
{{percentageValue}}
In your controller, set the percentageValue variable:
$scope.percentageValue = 39;
And that's it! You should now have the omni bar directive like what you see above (but without the animation).
Attributes / Options
Below are the available attributes to configure the multi-select directive:
-
current-value (REQUIRED) and max-value
Accept direct value or $scope variable.
The current-value, combined with max-value (if specified), will decide the width percentage of the current-bar using this formula: (current-value / max-value) * 100
IMPORTANT: If max-value is not specified, the current-value will automatically be assumed as the percentage.
-
current-style
CSS for the current-value bar.
Format: { style: value [, style: value .. ] }
-
max-style
CSS for the current-value bar.
Format: { style: value [, style: value .. ] }
-
container-style
CSS for the container (not visible in the sample).
Format: { style: value [, style: value .. ] }
-
info-style
CSS for the text within the bar.
Format: { style: value [, style: value .. ] }
* All CSS properties above are the same with jQuery's css() method format. Read more at
http://api.jquery.com/css
Demo
1) Simple bar
This is a loading / progress bar you can use for almost anything.
Budget usage: ${{currentValue}} of ${{maxValue}}
$scope.currentValue = 700;
$scope.maxValue = 1500;
$scope.loadingCurrent1 = {
backgroundColor: "#008080"
}
2) Page loading bar
Look on top of the page. Missed it? Refresh your page and look again.
Note: This is just a simple, stupid page loading algorithm. Not really accurate. Use it at your own risk.
$scope.pageSize = 0;
var pulse = $interval( function( pulse ) {
$scope.pageSize = $scope.pageSize + 1;
if ( $scope.pageSize > 98 ) {
$scope.pageSize = 98;
}
}, 50 );
angular.element(document).ready(function () {
$scope.pageSize = 100;
$interval.cancel(pulse);
});
$scope.loadingBarStyle2 = {
position: "fixed",
top: "0px",
left: "0px",
height: "3px",
zIndex: "20"
}
$scope.loadingCurrent2 = {
backgroundColor: "orange"
}
Dependency
AngularJS v1.2.15. Other versions may or may not work. Please test first.
Browser Compatibility
Tested on:
- Opera >= 12.16 (Yes, I love Opera browser! Download yours here: http://www.opera.com/)
IE8 IE: At the moment I don't have access to IE9 and above, so please test first before you use this on production environment.- Firefox >= 27
- Google Chrome >= 33
- Might work on some mobile browsers. Please test first before you use this on production environment.
Bug Reporting
- Search in the issue section first. Somebody might have reported the same bug and/or asked similar question. If there's none, then please create a new issue in https://github.com/isteven/angular-multi-select/issues.
- Try to reproduce the problem in JSFiddle or Plunker (or any other online JS collaboration tool), and include the URL in the issue you are creating.
Note
- This directive is a practical solution, not a performance champion. It will not win any code efficiency competition.
- As for the moment, developments are on going, so I am not accepting pull requests. I will choose & add them manually instead.
- If you like / use this directive in your awesome projects, star this repo. It's a huge motivation for me. Would also love to hear from you if you use it in an open source project. Thanks!
Licence
Released under the MIT license:
The MIT License (MIT)
Copyright (c) 2014 Ignatius Steven (https://github.com/isteven)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE
More AngularJS Directives
Have a look on other directives I've created: