title: JQuery progress bar plugin shows NaN%
body: <p>So I'm working on a project where I want to display the upload progress of a video. I'm using this plugin: <a href="http://www.jqueryscript.net/loading/Animated-Circular-Progress-Indicator-Plugin-With-jQuery-Canvas.html" rel="nofollow noreferrer">JQuery ring progress bar</a>.</p>
  
  <p>When I submit the form the text in the div looks like <strong>NaN%</strong> and nothing more.</p>
  
  <p>Please help. I'm new to ajax and jQuery.</p>
  
  <p>This is my jQuery:</p>
  
  <pre><code>var options = {
      height: "100px",
      width: "100px",
      line_width: 2,
      color: "#3281ff",
      starting_position: 25,
      percent: 0,
      text: "percent"
  };
  
  var progress_circle = $("#progress-circle").gmpc(options);
      //console.log(progress_circle);
      //http://malsup.com/jquery/form/progress2.html
      (function() {
      $('form').ajaxForm({
          beforeSend: function() {
              var percentVal = '0%';
              console.log('test');
              progress_circle.gmpc('percent', percentVal);
          },
          uploadProgress: function(event, position, total, percentComplete) {
              var percentVal = percentComplete;
  
              progress_circle.gmpc('percent', percentVal);
              //progress_circle.gmpc('animate', percentVal);
          },
          success: function() {
              setTimeout(7000);
              window.location.replace("/1");
          },
      }); 
      })();
  </code></pre>
  
  <p>And this is the div that is important:</p>
  
  <pre><code>Upload progress:
  &lt;div id="progress-circle"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for the help guys!</p>