CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Frank
Frank

Reputation: 119

How to animate bootstrap progress bar once in view?

I am looking to animate bootstrap's progress bar once it's been scrolled to view, right now it animates as soon as page is loaded and once I scroll to the progress bar it's done animating.

HTML:

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="75">HTML</div>
</div>
<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="65">CSS</div>
</div>
<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="20">JavaScript</div>
</div>
<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="25">WordPress</div>
</div>

CSS:

.progress .progress-bar.six-sec-ease-in-out {
-webkit-transition: width 6s ease-in-out;
-moz-transition: width 6s ease-in-out;
-ms-transition: width 6s ease-in-out;
-o-transition: width 6s ease-in-out;
transition: width 6s ease-in-out;

}

Upvotes: 4

Views: 5873

Answers (4)

Sandeep
Sandeep

Reputation: 1

In my case this code is working fine.

Include latest jquery before this.

html

<!-- skill bar -->
        <div class="row pb-5">
          <!-- HTML/CSS -->
          <div class="col-lg-4">
            <h4>HTML/CSS</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 80%"
                aria-valuenow="80"
              ></div>
            </div>
          </div>

          <!-- JavaScript -->
          <div class="col-lg-4">
            <h4>JAVASCRIPT</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 60%"
                aria-valuenow="60"
              ></div>
            </div>
          </div>

          <!-- Angular -->
          <div class="col-lg-4">
            <h4>ANGULAR</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 60%"
                aria-valuenow="60"
              ></div>
            </div>
          </div>

          <!-- UI Design -->
          <div class="col-lg-4">
            <h4>UX/UI</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 45%"
                aria-valuenow="45"
              ></div>
            </div>
          </div>

          <!-- GIT -->
          <div class="col-lg-4">
            <h4>GIT/GITHUB</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 40%"
                aria-valuenow="40"
              ></div>
            </div>
          </div>

          <!-- PHP/MYSQL -->
          <div class="col-lg-4">
            <h4>PHP/MYSQL</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 50%"
                aria-valuenow="50"
              ></div>
            </div>
          </div>
        </div>

css

.animateBar {
  animation-name: animateBar;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.9s;
}
@keyframes animateBar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

javascript

$(document).ready(function () {
  var targetParent = $(".progress");
  targetParent.each(function () {
    //required variables
    var target = $(this).children();
    var offsetTop = $(this).offset().top;
    var winHeight = $(window).height();
    // var data_width = target.attr("aria-valuenow") + "%";

    //animation starts
    if (winHeight > offsetTop) {
      target.addClass("animateBar");
    }

    //animation with scroll
    $(window).scroll(function () {
      var scrollBar = $(this).scrollTop();
      var animateStart = offsetTop - winHeight;
      if (scrollBar > animateStart) {
        target.addClass("animateBar");
      }
    });
  });
});

Upvotes: -1

daurek
daurek

Reputation: 41

If you don't want to use Waypoints here's a solution

$(function()
        {
            var $section = $('.progress-element');

            $(document).bind('scroll', function(ev)
            {
                var scrollOffset = $(document).scrollTop();
                var containerOffset = $section.offset().top - window.innerHeight;

                if (scrollOffset > containerOffset)
                {
                    $(document).unbind('scroll');
                    $(".progress-element").each(function()
                    {
                        var progressBar = $(".progress-bar");
                            progressBar.each(function(indx)
                            {
                                $(this).animate({"width": $(this).attr("aria-valuenow") + "%"}, 500);
                            });
                    });
                }
            });
        });

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122037

Try this https://jsfiddle.net/audLoLb0/1/

HTML

<div class="progress-element">
    <p>HTML</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="75"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
    <p>CSS</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="65"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
    <p>JavaScript</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="20"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
    <p>Wordpress</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="25"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
</div><!-- End of progress-element -->

CSS

.progress {
    height: 1px;
    background: none;
    box-shadow: none;
}

.progress-bar {
    background: black;
}

.progress-element {
    text-align: left;
}

JS

 $(".progress-element").each(function() {
      var progressBar = $(".progress-bar");
      progressBar.each(function(indx){
          $(this).css("width", $(this).attr("aria-valuenow") + "%");
      });
  });

Important

If you want bars to trigger when you enter viewport and i bet you do you have to use this http://imakewebthings.com/waypoints/

And just use this code

JS

/*---------------------------------------------- 
                PROGRESS BARS
------------------------------------------------*/
  $(".progress-element").each(function() {
      $(this).waypoint(function() {
      var progressBar = $(".progress-bar");
      progressBar.each(function(indx){
          $(this).css("width", $(this).attr("aria-valuenow") + "%");
      });
  }, {
      triggerOnce: true,
      offset: 'bottom-in-view'
    });
   });

Don't forget to include latest jquery before this

Upvotes: 3

Aslam
Aslam

Reputation: 21

Have you thought about using the $.onScreen plugin. You can find it Here. It is the simplest and most effective way to get the onScreen thing for jQuery.

$('elements').onScreen({
   container: window,
   direction: 'vertical',
   doIn: function() {
     // Do something to the matched elements as they come in
   },
   doOut: function() {
     // Do something to the matched elements as they get off scren
   },
   tolerance: 0,
   throttle: 50,
   toggleClass: 'onScreen',
   lazyAttr: null,
   lazyPlaceholder: 'someImage.jpg',
   debug: false
});

Upvotes: 2

Related Questions