SOURCE

canvas();
animate();

    function animate(){
        var z=$('.z');
        var g=$('.g div:nth-child(3)');

        move();
        setInterval(function(){move();},5100);

        function move(){
            g.animate({'height':'30px'},500);
            g.animate({'height':'0'},500);
            g.animate({'height':'30px'},500);
            g.animate({'height':'0'},500);
            g.animate({'height':'60px'},500);
            g.animate({'height':'0'},500);

            setTimeout(function(){z.css({'transform':'rotate(-90deg)'});},600);
            setTimeout(function(){z.css({'transform':'rotate(-110deg)'});},1100);
            setTimeout(function(){z.css({'transform':'rotate(-30deg)'});},1600);
            setTimeout(function(){z.css({'transform':'rotate(-80deg)'});},2100);
            setTimeout(function(){z.css({'transform':'rotate(90deg)','transition': '1s'});},2600);
            setTimeout(function(){z.css({'transform':'rotate(-135deg)','transition': '2s'});},3100);
            setTimeout(function(){z.css({transition: '0.5s'});},5100);

        }
    }

    function canvas(){
        var PI=Math.PI;
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        dizuo();//底座
        biao();//仪表盘
        xian();//线管
        qitong();//气筒

        function biao(){
            //灰 -1
            ctx.beginPath();
            ctx.arc(90, 90, 90, 0, PI*2);
            ctx.fillStyle = '#919FA8';
            ctx.fill();
            ctx.closePath();

            //红
            ctx.beginPath();
            ctx.moveTo(90, 90);
            ctx.arc(90, 90, 75, -PI/4, PI/4);
            ctx.fillStyle = '#E43742';
            ctx.closePath();
            ctx.fill();
            //白
            ctx.beginPath();
            ctx.moveTo(90, 90);
            ctx.arc(90, 90, 75, PI/4, PI*3/4);
            ctx.fillStyle = '#fff';
            ctx.closePath();
            ctx.fill();
            //绿
            ctx.beginPath();
            ctx.moveTo(90, 90);
            ctx.arc(90, 90, 75, PI*3/4, PI*5/4);
            ctx.fillStyle = '#6BB9AD';
            ctx.closePath();
            ctx.fill();
            //黄
            ctx.beginPath();
            ctx.moveTo(90, 90);
            ctx.arc(90, 90, 75, PI*5/4, PI*7/4);
            ctx.fillStyle = '#E7D14E';
            ctx.closePath();
            ctx.fill();

            //白 -3
            ctx.beginPath();
            ctx.arc(90, 90, 55, 0, PI*2);
            ctx.fillStyle = '#fff';
            ctx.fill();
            ctx.closePath();
        }

        function dizuo(){
            //黑
            ctx.beginPath();
            ctx.lineTo(60, 194);
            ctx.lineTo(120, 194);
            ctx.lineTo(115, 178);
            ctx.lineTo(65,178);
            ctx.fill();
            ctx.closePath();

            //绿
            ctx.beginPath();
            ctx.fillStyle = '#6BB9AD';
            ctx.fillRect(35,194,110,14);
            ctx.closePath();


        }

        function xian(){
            //左边接头-红
            ctx.beginPath();
            ctx.fillStyle = '#E43742';
            ctx.fillRect(145,197,5,8);
            ctx.closePath();
            //横向-1
            ctx.beginPath();
            ctx.fillStyle = '#E7D14E';
            ctx.fillRect(150,198,60,6);
            ctx.closePath();
            //垂直方向-2
            ctx.beginPath();
            ctx.fillStyle = '#E7D14E';
            ctx.fillRect(204,152,6,46);
            ctx.closePath();
            //圆弧-3
            ctx.beginPath();
            ctx.moveTo(194, 152);
            ctx.arc(194, 152, 16, PI/2, PI*2);
            ctx.fillStyle = '#E7D14E';
            ctx.closePath();
            ctx.fill();
            //圆弧填充-4
            ctx.beginPath();
            ctx.arc(194, 152, 10, 0, PI*2);
            ctx.fillStyle = '#185699';
            ctx.fill();
            ctx.closePath();
            //横向-5
            ctx.beginPath();
            ctx.fillStyle = '#E7D14E';
            ctx.fillRect(194,162,80,6);
            ctx.closePath();
            //右边接头-黑
            ctx.beginPath();
            ctx.lineTo(274, 160);
            ctx.lineTo(282, 165);
            ctx.lineTo(274, 170);
            ctx.fillStyle = '#000';
            ctx.fill();
            ctx.closePath();
        }

        function qitong(){
            //黑
            ctx.beginPath();
            ctx.fillStyle = '#000';
            ctx.fillRect(253,195,80,14);
            ctx.closePath();
            //红
            ctx.beginPath();
            ctx.fillStyle = '#E43742';
            ctx.fillRect(280,135,26,60);
            ctx.closePath();
            //白
            ctx.beginPath();
            ctx.fillStyle = '#fff';
            ctx.fillRect(280,110,26,25);
            ctx.closePath();
            //绿
            ctx.beginPath();
            ctx.fillStyle = '#6BB9AD';
            ctx.fillRect(280,95,26,15);
            ctx.closePath();
            //白
            ctx.beginPath();
            ctx.fillStyle = '#E43742';
            ctx.fillRect(280,75,26,20);
            ctx.closePath();
        }
    }

<div class="box">
    <canvas id="myCanvas" width="800" height="600">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    <div class="z"></div>
    <div class="g">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>

html,body{width: 100%;height: 100%;background: #185699;overflow: hidden;margin: 0}

.box{margin:20px;position: relative}

.z{width: 16px;height: 16px;border-radius: 50%;background: #919FA8;transition: 0.5s;position: absolute;left: 82px;top: 82px;transform: rotate(-135deg);opacity: 0.8;}
.z:after{width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 70px solid #919FA8;content: '';display: block;position: absolute;bottom: 8px;left: 0}

.g{width: 50px;position: absolute;left: 268px;bottom: 525px}
.g div{margin: auto}
.g div:nth-of-type(1){width: 50px;height: 12px;background: #6BB9AD}
.g div:nth-of-type(2){width: 6px;height: 10px;background: #000}
.g div:nth-of-type(3){width: 6px;height: 0;background: #919FA8}