Bootstrap snippet: user profile complete

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: user,profile,complete



<div class="row"> <div class="col-sm-3"> <!-- START widget--> <div class="panel widget"> <div class="panel-body bg-danger text-center"> <div class="radial-bar radial-bar-40 radial-bar radial-bar-danger m0"> <img src="http://bootdey.com/img/Content/user_3.jpg" alt=""> </div> <p> <strong>40%</strong> <span>complete</span> </p> </div> </div> <!-- END widget--> </div> <div class="col-sm-3"> <!-- START widget--> <div class="panel widget"> <div class="panel-body bg-danger text-center"> <div class="radial-bar radial-bar-50 radial-bar radial-bar-danger m0"> <img src="http://bootdey.com/img/Content/user_3.jpg" alt=""> </div> <p> <strong>40%</strong> <span>complete</span> </p> </div> </div> <!-- END widget--> </div> </div>
body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.52857143; color: #515253; background-color: #f5f7fa; margin-top:20px; } .widget .panel, .widget.panel { overflow: hidden; } .widget { margin-bottom: 20px; border: 0; } .bg-danger { background-color: #f05050; color: #fff!important; } .radial-bar-danger.radial-bar-40 { background-image: linear-gradient(90deg,#fafafa 50%,transparent 50%,transparent),linear-gradient(234deg,#f05050 50%,#fafafa 50%,#fafafa); } .radial-bar-primary.radial-bar-50 { background-image: linear-gradient(90deg,#fafafa 60%,transparent 60%,transparent),linear-gradient(234deg,#5d9cec 60%,#fafafa 60%,#fafafa); } .m0 { margin: 0!important; } .radial-bar { position: relative; display: inline-block; border-radius: 50%; border: 2px solid #fafafa; background-color: transparent; margin-bottom: 20px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 80px; height: 80px; font-size: 18px; } .radial-bar:after, .radial-bar>img { width: 56px; height: 56px; margin-left: 12px; margin-top: 12px; line-height: 56px; } .radial-bar>img { z-index: 102; } .radial-bar:after, .radial-bar>img { display: inline-block; position: absolute; top: 0; left: 0; border-radius: 50%; text-align: center; font-weight: 700; color: #a1a2a3; }
Dey-Dey

user profile complete

Dey-Dey
  Jun 7th 2015, 13:20
167 Views