javascript - Trying to implement a simple responsive progress bar with issues -

i've followed instructions site obtained information off , i'm stuck. code follows:

html

<div class="progress-wrap progress" data-progress-percent="25">     <div class="progress-bar progress"></div> </div> 

the css code

 .progress {     width: 100%;     height: 50px; }  .progress-wrap {     background: #f80;     margin: 20px 0;     overflow: hidden;     position: relative; }  .progress-bar {     background: #ddd;     left: 0;     position: absolute;     top: 0; } 

and js

// on page load... moveprogressbar(); // on browser resize... $(window).resize(function() {     moveprogressbar(); });  // signature progress function moveprogressbar() {     console.log("moveprogressbar");     var getpercent = ($('.progress-wrap').data('progress-percent') / 100);     var getprogresswrapwidth = $('.progress-wrap').width();     var progresstotal = getpercent * getprogresswrapwidth;     var animationlength = 2500;      // on page load, animate percentage bar data percentage length     // .stop() used prevent animation queueing     $('.progress-bar').stop().animate({         left: progresstotal     }, animationlength); } 

with javascript file when load in chrome error

uncaught typeerror: cannot call method 'data' of null

i don't know next. i've extensively searched google knowledge of javascript eluding me.

your code runs without errors. changed html part this:

<div class="progress-wrap progress" data-progress-percent="25"> 

to this

<div class="progress-wrap progress" data-progress-percent="25">     <div class="progress progress-bar"/> </div> 

so animation visible.

there have working jsfiddle.

based on error message provided have problem somewhere else.