使用运行其长度的进度条设置面板标题

Question

我有一系列面板，对应于用户必须执行的某些任务。

我使用面板标题具有活动名称的面板进行设置，当扩展时，它会显示与该活动相关的任务列表。每个任务都可以具有不完整，成功和失败的状态。

我想在标题中添加堆叠进度条，以便在折叠面板时，您可以快速查看内部任务的状态。理想情况下，标题的第一行是活动名称，第二行将使用堆叠的进度条填充。

<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>

这远远不能做我需要做的事情，但它似乎遵循引导要求来实现我所说的。

非常感谢你的帮助。