Bootstrap snippet: Goal progress widget

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: users,progress



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="col-md-6"> <div class="panel"> <header class="panel-heading"> goal progress <span class="tools pull-right"> <a href="#" class="fa fa-chevron-down"></a> <a href="#" class="fa fa-times"></a> </span> </header> <div class="panel-body"> <ul class="goal-progress"> <li> <div class="prog-avatar"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt=""> </div> <div class="details"> <div class="title"> <a href="#">John Doe</a> - Project Lead </div> <div class="progress progress-xs"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 70%"> <span class="">70%</span> </div> </div> </div> </li> <li> <div class="prog-avatar"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt=""> </div> <div class="details"> <div class="title"> <a href="#">Cameron Doe</a> - Sales </div> <div class="progress progress-xs"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 91%"> <span class="">91%</span> </div> </div> </div> </li> <li> <div class="prog-avatar"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt=""> </div> <div class="details"> <div class="title"> <a href="#">Hoffman Doe</a> - Support </div> <div class="progress progress-xs"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="">40%</span> </div> </div> </div> </li> <li> <div class="prog-avatar"> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> </div> <div class="details"> <div class="title"> <a href="#">Jane Doe</a> - Marketing </div> <div class="progress progress-xs"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="">20%</span> </div> </div> </div> </li> <li> <div class="prog-avatar"> <img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt=""> </div> <div class="details"> <div class="title"> <a href="#">Hoffman Doe</a> - Support </div> <div class="progress progress-xs"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="">45%</span> </div> </div> </div> </li> </ul> <div class="text-center"><a href="#">View all Goals</a></div> </div> </div> </div> </div>
body{ margin-top:20px; background:#eee; } .panel-heading { border-bottom: 1px dotted rgba(0, 0, 0, 0.2); padding: 15px; text-transform: uppercase; color: #535351; font-size: 14px; font-weight: bold; } .tools a:hover { background: #65cea7; color: #fff; } .tools a { background: #E3E4E8; border-radius: 3px; -webkit-border-radius: 3px; color: #858582; float: left; margin-left: 3px; padding: 10px; text-decoration: none; } ul.goal-progress { list-style-type: none; padding: 0; } ul.goal-progress li { display: inline-block; width: 100%; border-bottom: 1px dashed #dcdcdc; margin-bottom: 15px; padding-bottom: 15px; } ul.goal-progress li .prog-avatar { width: 40px; height: 40px; float: left; margin-right: 25px; } ul.goal-progress li .prog-avatar img { width: 100%; border-radius: 50%; -webkit-border-radius: 50%; } .progress-bar { box-shadow: none; line-height: 15px; text-align: right; padding-right: 10px; font-size: 11px; }
Dey-Dey

Goal progress widget

Dey-Dey
  Jan 14th, 08:09
1.3K Views