프로그레스바 (Progress Bar)

세상 간단한 프로그레스바 구현!

html>

<div class="progress-wrap progress" data-progress-percent="30"> <!-- 퍼센트 넣기 -->

  <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-wrap .progress-bar {

  background: #ddd;

  left: 0;

  position: absolute;

  top: 0;

}

js >

    moveProgressBar();

    $(window).resize(function() { // 메소드 반응형

        moveProgressBar();

    });

    function moveProgressBar() {

      console.log("moveProgressBar");

        var getPercent = ($('.progress-wrap').data('progress-percent') / 100);

        var getProgressWrapWidth = -$('.progress-wrap').width(); ( 여기서 부호에 따라 줄어드는 방향 결정 가능 )

        var progressTotal = getPercent * getProgressWrapWidth;

        var animationLength = 1000; // 프로그레스 움직이는 속도

        

        $('.progress-bar').stop().animate({

            left: progressTotal

        }, animationLength);

    }