title: Chart.js - How to show loading animation before plotting chart
body: <p>I am using <a href="http://www.chartjs.org" rel="nofollow noreferrer">chart.js</a> plugin to plot line chart.<br>
  I want to display loading before plotting chart.</p>
  
  <p>I have tried following but nothing is happening.<br>
  Here it is showing jQuery error:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: progress is not defined</p>
  </blockquote>
  
  <p>But in my application it doesnt showing error.</p>
  
  <p>How to show animation or loading before plotting graph?<br>
  I am using    <a href="https://semantic-ui.com/" rel="nofollow noreferrer">semantic-ui</a> as css framework.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Chart(document.getElementById("line-chart"),{
    type: 'line',
    data:{
      labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
      datasets: [{
          data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
          label: "Africa",
          borderColor: "#3e95cd",
          fill: false
        },{
          data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
          label: "Asia",
          borderColor: "#8e5ea2",
          fill: false
        },{
          data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
          label: "Europe",
          borderColor: "#3cba9f",
          fill: false
        },{
          data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
          label: "Latin America",
          borderColor: "#e8c3b9",
          fill: false
        },{
          data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
          label: "North America",
          borderColor: "#c45850",
          fill: false
        }
      ]
    },
    options:{
      title:{
        display: true,
        text: 'World population per region (in millions)'
      },
      animation:{
        onProgress: function (animation){
          progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
        }
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"&gt;&lt;/script&gt;
  
  &lt;canvas id="line-chart" &gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>