<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="speedometer"> <div class="pointer"></div> </div> </div>

body { background: #222; } .wrapper { margin: 30px auto; width: 200px; } .wrapper .speedometer { width: 200px; height: 100px; background: #666; -moz-border-radius: 200px 200px 0 0; -webkit-border-radius: 200px; border-radius: 200px 200px 0 0; position: relative; } .wrapper .speedometer .pointer { position: absolute; bottom: 0px; left: 50%; width: 0; height: 0; } .wrapper .speedometer .pointer:after { content: ""; display: block; width: 40px; height: 20px; -moz-border-radius: 40px 40px 0 0; -webkit-border-radius: 40px; border-radius: 40px 40px 0 0; background: #333; position: absolute; bottom: -10px; left: -20px; } .wrapper .speedometer .pointer:before { content: ""; display: block; position: absolute; left: -5px; bottom: 0px; width: 10px; height: 80px; background: #600; transform-origin: center 80px; animation: roll 3s alternate infinite; } @keyframes roll { from { -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } to { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } }