title: How to make a percentage circle using only code
body: <p>I am trying to make 6 percentage circles in a horizontal line like this picture.</p>
  
  <p><a href="https://i.stack.imgur.com/XZN0E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XZN0E.png" alt="Circle"></a></p>
  
  <p>I have done lots of searches online and have found many results. 
  One the searches I found this website: <a href="https://stackoverflow.com/questions/14222138/css-progress-circle">CSS Progress Circle</a>. When putting the code into my existing code it does not work. Every time I try to put two or more of them in the code, it either disappears or messes up the rest of my code. Can anybody help me?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt; 
   &lt;link href="about.css" type="text/css" rel="stylesheet"/&gt;
  
      &lt;title&gt;Nutterbug Graphics&lt;/title&gt;
      &lt;center&gt;
      &lt;div id="title"&gt;
      &lt;img style="border:10px outset silver"; "margin:0px"; src="Pictures/fulb_flat.png" width="275" height="250" id="bulb2" hspace="20"&gt;
      &lt;img src="Banner_Flat.png"; width="700" height="250" id="graphics" &gt; 
      &lt;img style="border:10px outset silver"; "margin:0px"; src="Pictures/fulb_flat2.png" width="275" height="250" id="bulb2" hspace="20"&gt;
      &lt;/center&gt;   
      &lt;/div&gt;
  &lt;/head&gt;
  &lt;body bgcolor="#1c8ab4"&gt;
  &lt;div class="bg"&gt;
   &lt;h1&gt;Savannah Lundquist &lt;/h1&gt;
  &lt;div class="p"&gt;
  Info .....  
  &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="body ftr_section s_gray"&gt;
  
  &lt;div class="chart" id="graph" data-percent="88"&gt;&lt;/div&gt;
  
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="body ftr_section s_white"&gt;
  &lt;h1&gt;Skills and Qualifications&lt;/h1&gt;
  &lt;div class="sft_skills"&gt;
      &lt;p&gt;
      &lt;div class="skills"&gt;
  &lt;img src="Pictures/T2.png" height="30%" width="30%"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="about.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div {
      position:relative;
      margin:80px;
      width:220px; height:220px;
  }
  canvas {
      display: block;
      position:absolute;
      top:0;
      left:0;
  }
  span {
      color:#555;
      display:block;
      line-height:220px;
      text-align:center;
      width:220px;
      font-family:sans-serif;
      font-size:40px;
      font-weight:100;
      margin-left:5px;
  }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>$(document).ready(function(){
  
      $("#show").click(function(){
      $(this).parent().addClass("more");
      $(this).hide();
          $("#complete").show();
  
      });
  
      $("#hide").click(function(){
          $("#complete").hide();
      $("#show").show();
      });
  
  var el = document.getElementById('graph'); // get canvas
  
  var options = {
      percent:  el.getAttribute('data-percent') || 25,
      size: el.getAttribute('data-size') || 220,
      lineWidth: el.getAttribute('data-line') || 15,
      rotate: el.getAttribute('data-rotate') || 0
  }
  
  var canvas = document.createElement('canvas');
  var span = document.createElement('span');
  span.textContent = options.percent + '%';
  
  if (typeof(G_vmlCanvasManager) !== 'undefined') {
      G_vmlCanvasManager.initElement(canvas);
  }
  
  var ctx = canvas.getContext('2d');
  canvas.width = canvas.height = options.size;
  
  el.appendChild(span);
  el.appendChild(canvas);
  
  ctx.translate(options.size / 2, options.size / 2); // change center
  ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
  
  //imd = ctx.getImageData(0, 0, 240, 240);
  var radius = (options.size - options.lineWidth) / 2;
  
  var drawCircle = function(color, lineWidth, percent) {
          percent = Math.min(Math.max(0, percent || 1), 1);
          ctx.beginPath();
          ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
          ctx.strokeStyle = color;
          ctx.lineCap = 'round'; // butt, round or square
          ctx.lineWidth = lineWidth
          ctx.stroke();
  };
  
  drawCircle('#efefef', options.lineWidth, 100 / 100);
  drawCircle('#555555', options.lineWidth, options.percent / 100);
  and CSS
  });
  </code></pre>