Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.js"></script>
<div class="row">
  <div class="col-sm-9">
    <h2>Stand</h2>
    <h2>
    <small class="text-muted">The amount of time you've been standing</small>
    </h2>
  </div>

  <div class="col-sm-3">
    <div style="width:100%;">
      <canvas id="standChart"></canvas>
      <div class='precentage'>
      33%
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-9">
    <h2>Move</h2>
    <h2>
    <small class="text-muted">Your movement progress</small>
    </h2>
  </div>

  <div class="col-sm-3">
    <div style="width:100%;">
      <canvas id="moveChart"></canvas>
       <div class='precentage'>
      66%
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-9">
    <h2>Exercise</h2>
    <h2>
    <small class="text-muted">Your exercise progress</small>
    </h2>
  </div>

  <div class="col-sm-3">
    <div style="width:100%;">
      <canvas id="exerciseChart"></canvas>
       <div class='precentage'>
      99%
      </div>
    </div>
  </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.precentage {
  font-family: tahoma;
  font-size: 28px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

JavaScript

setupChart('standChart', 33);
setupChart('moveChart', 66);
setupChart('exerciseChart', 99);


function setupChart(chartId, progress) {
  var canvas = document.getElementById(chartId);
  var context = canvas.getContext('2d');

  var remaining = 100 - progress;
  var data = {
    labels: ['Progress', '', ],
    datasets: [{
      data: [progress, remaining],
      backgroundColor: [
        '#8FF400',
        '#FFFFFF'
      ],
      borderColor: [
        '#8FF400',
        '#408A00'
      ],
      hoverBackgroundColor: [
        '#8FF400',
        '#FFFFFF'
      ]
    }]
  };

  var options = {
    responsive: true,
    maintainAspectRatio: false,
    scaleShowVerticalLines: false,

    cutoutPercentage: 80,
    legend: {
      display: false
    },
    animation: {
      onComplete: function() {
     
      }
    }
  };

  Chart.defaults.global.tooltips.enabled = false;
  var chart = new Chart(context, {
    type: 'doughnut',
    data: data,
    options: options
  });
}