Create progress bar with jQuery’s Hover()

Asked

Viewed 89 times

1

I need to create a progress bar while my cursor is on top of an image. If the cursor leaves, then I need the progress to be reset to repeat the process if the cursor goes back over the image. When I get to 100% I’ll open a modal.

Any idea?

jquery html css html5 progress-bar
  • 1

    Javascript, if you search the web you will find several examples of this type of interaction.

1 answer

1


You can use the function hover() to get the event when the mouse pointer enters/exits the element:

$(function(){
  
  var interval,
      progress = $('progress'),
      INTERVAL_DELAY = 50;
  
  
  // "mouse in"
  progress.hover(function(){
  
    interval = setInterval(function(){
      progress.val(progress.val()+1);
      
      if(progress.val() === 100){
        console.log('Modal!');
        clearInterval(interval);
      } 
      
    }, INTERVAL_DELAY);
    
  // "mouse out"  
  }, function(){
  
    clearInterval(interval);
    progress.val(0);
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress min='0' max='100' value='0'>

  • 1

    Perfect! Thank you very much friend!

Browser other questions tagged jquery html css html5 progress-bar

You are not signed in. Login or sign up in order to post.