A Pen by Sam.

index.html

<div class="mask">
	<div class="semi-circle"></div>
	<div class="semi-circle--mask"></div>
</div>

Pure-css-gauge.markdown

Pure css gauge

A gauge made with css

A Pen by Sam on CodePen.

License.

script.js

setInterval(function() {
    var newVal = Math.floor((Math.random() * 179) + 1);

    $(".semi-circle--mask").attr({
        style: '-webkit-transform: rotate(' + newVal + 'deg);' +
                '-moz-transform: rotate(' + newVal + 'deg);' +
                'transform: rotate(' + newVal + 'deg);'
	});				
}, 1000);

style.scss

@import "compass";
.mask {
    position: relative;
    overflow: hidden;
    
    display: block;
    width: 200px;
    height: 100px;
    margin: 20px;
}
.semi-circle {
    position: relative;
    
    display: block;
    width: 200px;
    height: 100px;
    
    background: linear-gradient(to right, #fa4133 0%,#fdbe37 50%,#1cb42f 100%);
    
    border-radius: 50% 50% 50% 50% / 100% 100% 0% 0% ;
    
    &::before {
        content: "";
        
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: 2;
        
        display: block;
        width: 140px;
        height: 70px;
        margin-left: -70px;
        
        background: #fff;
        
        border-radius: 50% 50% 50% 50% / 100% 100% 0% 0% ;
    }      
}

.semi-circle--mask {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 200px;
    height: 200px;
    
    background: transparent;
    
    transform: rotate(120deg) translate3d(0,0,0);
    transform-origin: center center;
    backface-visibility: hidden;
    transition: all .3s ease-in-out;
    
    &::before {
        content: "";
        
        position: absolute;
        top: 0;
        left: 0%;
        z-index: 2;
        
        display: block;
        width: 202px;
        height: 102px;
        margin: -1px 0 0 -1px;
        
        background: #ffffff;
        
        border-radius: 50% 50% 50% 50% / 100% 100% 0% 0% ;
    }      
}