<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
.yieldCircle {
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0.34);
border-radius: 100%;
-webkit-border-radius: 100%;
}

.yieldCircle .progressCircle {
transition: stroke-dasharray 0.4s linear 0.2s;
-webkit-transition: stroke-dasharray 0.4s linear 0.2s;
}

.yieldCircle .lineEnd {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform-origin: 19px 19px;
-webkit-transform-origin: 19px 19px;
-webkit-transition: transform 0.4s linear 0.2s;
transition: transform 0.4s linear 0.2s;
}
</style>
</head>

<body>
<div class="yieldCircle">
<svg width="500px" height="500px" viewBox="0 0 38 38" class="J_circle">
<circle r="16.7" cx="19" cy="19" fill="#FFEBEF"></circle>
<circle r="15.1" cx="19" cy="19" fill="#ffffff"></circle>
<circle class="progressCircle J_preC" r="16" cx="19" cy="19" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round" stroke="#E63256" stroke-dasharray="0 100" fill="none" transform="rotate(-180, 19 19)"></circle>
</svg>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("svg").attr("data-pre", 50);
$('.J_circle').each(function() {
var $svg = $(this);
var pre = $svg.data('pre');
var $progress = $svg.find('.J_preC');
if(!pre) {
$progress.hide();
}
$progress.attr('stroke-dasharray', pre + ' 100');
$progress.attr('stroke-opacity', '1');
});
</script>
</body>

</html>