CirclesJS Home

              
new Circles({
  el: document.getElementById("ex1"),
  circle : {
    value: 75,
    radius: 125,
    stroke_width : 30,
    stroke : '#09B1A0'
  },
  middleText : {
    fill : '#09B1A0',
    value_type : "percentage",
    font_size : 30,
    font_family : 'sans-serif'
  },
  fillRest : {
    stroke : "#F0D628"
  }
}).animate(5000)

read more about configuration

              
new Circles({
  el: document.getElementById("ex2"),
  circle : {
    value: 77,
    radius: 125,
    stroke_width : 20,
    stroke : '#09B1A0',
    stroke_linecap : "square",
    max_angle:180,
    start_angle : -90
  },
  middleText : {
    fill : '#09B1A0',
    value_type : "number",
    font_size : 30,
    font_family : 'sans-serif'
  },
  fillRest : {
    stroke : "#F0D628"
  }
}).animate(5000)

read more about configuration

              
new Circles({
  el: document.getElementById("ex3"),
  circle : {
    value: 75,
    radius: 125,
    stroke_width : 10,
    stroke : '#09B1A0'
  },
  middleText : {
    fill : '#09B1A0',
    value_type : "percentage",
    font_size : 30,
    font_family : 'sans-serif'
  },
  fillRest : {
    stroke : "#F0D628",
    stroke_width : 5,
    radius: 125-10
  }
}).animate(5000)

more about configuration

Examples