HTML

<div class="rounded-indicator">
  <div class="val" data-name="degrees" data-mapper="roundControl">0</div>
  <div class="scale-back"></div>
  <div class="scale"></div>
  <div class="pointer"></div>
</div>

CSS

.rounded-indicator, .rounded-indicator *{
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border-radius:50%;
}
.rounded-indicator{
	position: relative;
}
.rounded-indicator *{
	position: absolute;
	top:0;
	left:0;
}
.scale-back{
	border: 4px solid #ddd;
}
.val{
	text-align: center;
	line-height:100px;
	font-size: 20pt;
}
.scale{
	border: 2px dotted #555;
}
.pointer{
	transition: transform .3s;
}
.pointer:after{
	content:"";
	display: block;
	width:10px;
	height:10px;
	position:absolute;
	top:-4px;
	left:46px;
	border-radius:50%;
	border: 2px solid rgba(0,0,0,0.5);
	background-color: #ddd;
}

JavaScript

roundControl = function(val,mode){
  if (!/^\d+$/.test(val))throw new Error('value must be a number');
  if(mode === 'set'){
    $(this).siblings( '.pointer' ).css('transform','rotate('+val+'deg)');
  }
  return val;
};