"Calificación de perfiles, Rating breakdown"
Materialize 0.98.2 Snippet by test9999

<link href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col s4"> <div class="rating-block center-align"><h4 class="fs30">Calificación</h4><h2 class="fs40">4.3 <small>/ 5</small></h2> <div class="row pl2-5"> <div class="col s2 amber white-text center-align block-star"><i class="material-icons">star</i></div> <div class="col s2 amber white-text center-align block-star"><i class="material-icons">star</i></div> <div class="col s2 amber white-text center-align block-star"><i class="material-icons">star</i></div> <div class="col s2 amber white-text center-align block-star"><i class="material-icons">star</i></div> <div class="col s2 blue-grey lighten-4 blue-grey-text text-lighten-3 center-align block-star"><i class="material-icons">star</i></div></div></div><h4 class="fs20 center-align">Estadísticas</h4> <div class="left"> <div class="left block-text"> <div class="fs16">Eficiencia</div> </div> <div class="left block-bar"> <div class="bar"> <div style="width: 1000%" class="progress-bar cyan accent-4"></div></div></div> </div> <div class="left"> <div class="left block-text"> <div class="fs16">Calidad</div></div> <div class="left block-bar"> <div class="bar"> <div style="width: 80%" class="progress-bar green darken-3"></div></div></div></div> <div class="left"> <div class="left block-text"> <div class="fs16">Costo</div></div> <div class="left block-bar"> <div class="bar"> <div style="width: 60%" class="progress-bar orange accent-4"></div></div> </div> </div> </div> </div> </div>
.bar { height: 9px; margin: 8px 0; overflow: hidden; background-color: #f5f5f5; -o-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -o-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -ms-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -webkit-background-clip: padding-box; } .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); -o-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); -ms-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); -webkit-background-clip: padding-box; -webkit-transition: width 0.6s ease; -o-transition: width 0.6s ease; -o-transition: width 0.6s ease; -ms-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -webkit-transition: width 0.6s ease; transition: width 0.6s ease; } .block-text { width: 83px; line-height: 1; } .block-bar { width: 233px; } .block-star { margin: 0 4px 0; padding: 4px 2px 0 3px !important; } .fs30 { font-size: 30px; } .fs40 { font-size: 40px; } .fs20 { font-size: 20px; } .fs16 { font-size: 16px; } .pl2-5 { padding-left: 2.5rem; }

Related: See More


Questions / Comments: