Circles

<!-- Other supportive js -->

<script src="js/circles.min.js"></script>

<script>
	var circle = Circles.create({
			id : 'circle', // Id of circle
			radius : 100, // radius of circle
			value : 93, // % Filled Circle
			width : 5, // Width of boundry of circle
			colors : [ '#FCE6A4', '#EFB917' ], // Colors of filled and non-filled areas of circle
			text : function(value) {
				return value + '%'; // Value written in the center of the circle
			},
		});
</script>

<!-- Markup -->

<div class="circle" id="circle"></div> 
								  		

Advance Circle

These are the circles which will start building when they came into the viewport, to use them just add one more js `waypoints.min.js` which is in the js folder and js as given below

<!-- Other supportive js -->

<script src="js/waypoints.min.js"></script>
<script src="js/circles.min.js"></script>

<script>
	if($.fn.waypoint){
			$.each($("#circle"), function(){
				$(this).waypoint(function() {
					var circle = Circles.create({
						id : 'circle', // Id of circle
						radius : 100, // radius of circle
						value : 93, // % Filled Circle
						width : 5, // Width of boundry of circle
						colors : [ '#FCE6A4', '#EFB917' ], // Colors of filled and non-filled areas of circle
						text : function(value) {
							return value + '%'; // Value written in the center of the circle
						},
					});
				}, {
					offset : '85%',
					triggerOnce: true,
				});
			});
		}
</script>