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 class="chart" data-legend="">
      <canvas id="standChart"></canvas>
    </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 class="chart" data-legend="">
      <canvas id="moveChart"></canvas>
    </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 class="chart" data-legend="">
      <canvas id="exerciseChart"></canvas>
    </div>
  </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.chart {
  position: relative;
}

.chart:after {
  content: attr(data-legend);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 20px Helvetica;
  color: #000;
  z-index: -1;
}

JavaScript

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


function setupChart(chartId, progress) {
  var canvas = document.getElementById(chartId);
  var container = canvas.parentElement;
  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,
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    cutoutPercentage: 80,
    legendCallback: function(chart) {
      return data.datasets[0].data[0] + '%';
    }
  };

  var chart = new Chart(context, {
    type: 'doughnut',
    data: data,
    options: options
  });
  container.setAttribute('data-legend', chart.generateLegend());
}