can suggest, have requirement need show bar 3 statuses in 1 bar different colors.
you can use bootstrap library have stacked progress bars.
to create stacked progress bar:
you can use code
<div class="progress"> <div class="progress-bar" role="progressbar" style="width:40%;background-color:red"> free space </div> <div class="progress-bar" role="progressbar" style="width:10%"> warning </div> <div class="progress-bar" role="progressbar" style="width:20%"> danger </div> to use in context of angular use can use ng-repeat on multiple progress add width , color based on requirement. bar.
for reference can like
html file
<html ng-app="myapp"> <head> <title>my html file</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <div class="progress" ng-controller="progressbars"> <div class="progress-bar" role="progressbar" ng-repeat="progress in progressdata"style="width:{{progress.value}}%;background-color:{{progress.color}}"> {{$index +1}} bar </div> </div> </body> </html> script file
var app = angular.module("myapp" , []); app.controller("progressbars" , function($scope) { $scope.progressdata = [{'value':20 , color:'red'},{'value':40 , color:'blue'}]; }); 
Comments
Post a Comment