dfcreative/gauge

.gauge{
    position: relative;
    width: 30vw;
    height: 30vw;
    box-sizing: border-box;
}
.gauge-colors, .gauge-values, .gauge-marks{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: visible;
    font-family: sans-serif;
}
.gauge-marks{
    /* Adjust marks offset/color/visibility in there */
    margin: -8px;
}
.gauge-mark{
    /* Adjust single mark color/size/visibility */
    background: rgba(0,0,0,.4);
    width: 1px;
    height: 4px;
    position: absolute;
}
.gauge-values{
    /* Adjust labels offset by this, inc. making inset/outset */
    margin: -20px;
}
.gauge-value{
    position: absolute;
}
.gauge-colors{
    /* Color rings are inline SVG element */
    width: 100%;
    height: 100%;
}
.gauge-color{
    stroke-width: 4;
    fill: transparent;
}
.gauge-arrow{
    position: absolute;
    top: 0%;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 50%;

    /* Change arrow shape/color in arrow.svg */
    background: url(./arrow.svg) no-repeat 0 100%;
    background-size: 100% 55%;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.gauge:before{
    content: '';
    position: absolute;
    width: 7%;
    height: 7%;
    margin-left: -3.5%;
    margin-top: -3.5%;
    background: #1e98e4;
    top: 50%;
    left: 50%;
    border-radius: 20px;
}