Search code examples
csshtmlmaterialize

Create a player scorecard from css using front end framework

I am trying to make a player-card type page showing various attributes about the players in a meteor app. What I am struggling with is to find the web components and css that will enable me to build something like this?

enter image description here

I am using the Materialize.css framework, but thought just to the preloader class to create the ratings bars (strength etc) 

<div class="progress">
  <div class="determinate" style="width: 70%"></div>
</div>

Any help with this will be appreciated!

Solution

  • Assuming your main problem is with the progress bar, this should get you started:

    https://jsfiddle.net/L23kwohq/

    You could put that into a table for the view you proposed.

    CSS

    .progress {
  height: 2.6em;
  background-color: white;
}
.progress .determinate {
  background-color: lightblue;
}
.amount {
  font-size: 2em;
  padding-left: 80px;
  // Whatever other styles...
}

    HTML

    <div class="progress">
  <div class="determinate" style="width: 70%">
    <span class="amount">7</span>
  </div>
</div>