criteriometer

criteriometer.markdown

criteriometer

css solution of taking a half donut for display metrics

A Pen by Alexander Schmidt on CodePen.

License.

index.html

<div class="criteriometer">
  <div class="meter" style="transform: rotate(120deg)"></div>
</div>

style.less

@donut-radius: 100px;

.criteriometer {
  width: @donut-radius;
  height: @donut-radius / 2;
  border-top-left-radius: @donut-radius;
  border-top-right-radius: @donut-radius;
  border: @donut-radius / 2 solid #ccc;
  border-bottom: 0;
  position: relative;
}

.meter {
  width: 100%;
  height: @donut-radius / 20;
  background-color: #111;
  position: absolute;
  bottom: 0;
  left: -50%;
  transform: rotate(0deg); // default
  transform-origin: right bottom;
}

body {
  display: flex;
  justify-content: center;
  padding: 50px;
}