html5 - Setting up a panel-header with a progress bar that runs the length of it -


i have series of panels correspond # of tasks user has perform.

i set using panels panel heading has activity name , when expanded, reveals list of tasks associated activity. each of teh tasks can have status of incomplete, successful, failed.

i'd add stacked progress bar heading that, when panel collapsed, can see status of internal tasks. ideally first row of heading activity name , second row filled stacked progress bar. 

<div class="panel-heading">     <div class="row">         <div class="col-md-12">             <h6>                 <a ng-click="ervm.shower = !ervm.shower">er heading goes here</a>             </h6>         </div>                </div>     <div class="row">         <div class="col-md-12">             <div class="progress" style="width:100%">                 <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">                     free space                 </div>                 <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">                     warning                 </div>                 <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">                     danger                 </div>             </div>         </div>     </div> </div>

this comes close doing need seems follow bootstrap requirements implement i'm saying.

any appreciated.


Comments

Post a Comment

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more

javascript - Add class to another page attribute using URL id - Jquery -

i have attached id url. ex: when click link 1 , has #tab-2 id , takes me landing page. in landing page have find element has #tab-2 id have add class .active . i tried no luck. please 1 correct code. thanks js fiddle link html <div class="menu"> <ul> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-2">link 1</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-44">link 2</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-74">link 3</a></li> </ul> </div> landing page <div class="tab"> <ul> <li><a id="tab-2" class="active" >link 1 content</a></li> <li><a id="tab-44" >link 2 content</a></li> <li><a id="tab-74" >link 3 content</a></l
Read more

firefox - Where is 'webgl.osmesalib' parameter? -

i'm trying webgl running on firefox (v37.0.2) via software acceleration mesa. tried following steps have been stated in article: http://www.binarytides.com/enable-webgl-firefox-ubuntu/ however, unable find parameter named ' webgl.osmesalib ' in about:config section? has been removed (or renamed)? if yes, how should instruct firefox use mesa's software acceleration webgl? looks support osmesa removed in favour llvmpipe.
Read more