Javascript progress bar doesn't work

Question

I'd really love to have that progress bar (click me to see bar code) on my site, but when I add it, it doesn't work.

Original files:

HTML:

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

CSS:

.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;
  }
}

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 to data percentage length
        // .stop() used to prevent animation queueing
        $('.progress-bar').stop().animate({
            left: progressTotal
        }, animationLength);
    }

I have put these lines into my html file just to link these files:

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src='bar.js'></script>

I don't know am I doing anything wrong or the code is broken?

Please help! Mieciu

Answer 1

The working example that you provided uses SCSS and not CSS. In CSS, class declarations cannot be nested. If you take out the .progress-bar declaration from .progress-wrap, it works.

http://jsfiddle.net/dvqfzfkk/1/

// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
  moveProgressBar();
});

// SIGNATURE PROGRESS
function 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 to data percentage length
  // .stop() used to prevent animation queueing
  $('.progress-bar').stop().animate({
    left: progressTotal
  }, animationLength);
}

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="25">
  <div class="progress-bar progress"></div>
</div>