Progress bar in Jquery

Question

Progress bar in Jquery

Navigation

#1 by (1 votes)

0

Well, I have a bar that works the following way, when my scroll is on top of the div of the bars they will start to fill up. I did the css, but I can not do Jquery, any tips?

HTML:

    <label for="barra"><h2>HTML </h2><span id="porcentagemhtml"></span></label>
    <div class="container-barra">
      <div class="barra"></div>
    </div>

    <label for="barra"><h2>CSS </h2><span id="porcentagecss"></span></label>
    <div class="container-barra">
      <div class="barra"></div>
    </div>

    <label for="barra"><h2>JAVASCRIPT </h2><span id="porcentagemjs"></span></label>
    <div class="container-barra">
      <div class="barra"></div>
    </div>

    <label for="barra"><h2>PHP </h2><span id="porcentagemphp"></span></label>
    <div class="container-barra">
      <div class="barra"></div>
    </div>

    <label for="barra"><h2>SQL </h2><span id="porcentagemsql"></span></label>
    <div class="container-barra">
      <div class="barra"></div>
    </div>

CSS:

.container-barra{
  width: 100%;
  border: 0.1px solid;
  border-radius: 15px;
}

.barra{
  width: 0%;
  height: 20px;
  background-color: black;
  border-radius: 15px;

}

JQUERY:

$(document).scroll(function(){      
   var posicao = window.pageYOffset;
   if(posicao>=1287){
     setInterval(encheBarra, 30);
   } 
});
// Chamada da Função
function encheBarra(){

}

javascript html jquery css

asked by anonymous 07.04.2017 / 17:01

1 answer

How to pass string as a parameter in C ++ MongoDB for multi user data

score 1 · Accepted Answer

function move(idElem) {
  var elem = document.getElementById(idElem); 
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}
var auxPhp = 0;
var auxSql = 0;

$(window).on('scroll', function(){
    if(isScrolledIntoView('#barraPhp') && auxPhp == 0){
        move('barraPhp');
        auxPhp = 1;
    }
    if(isScrolledIntoView('#barraSql') && auxSql == 0){
        move('barraSql');
        auxSql = 1;
    }
});
function isScrolledIntoView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

.container-barra{
  width: 100%;
  border: 0.1px solid;
  border-radius: 15px;
}

.barra{
  width: 0%;
  height: 20px;
  background-color: black;
  border-radius: 15px;

}

<label for="barra"><h2>HTML </h2><span id="porcentagemhtml"></span></label>
    <div class="container-barra">
      <div class="barra" id="barraHtml" ></div>
    </div>
    <button onclick="move('barraHtml')">Click Me</button> 

    <label for="barra"><h2>CSS </h2><span id="porcentagecss"></span></label>
    <div class="container-barra">
      <div class="barra"></div>
    </div>

    <label for="barra"><h2>JAVASCRIPT </h2><span id="porcentagemjs"></span></label>
    <div class="container-barra">
      <div class="barra"></div>
    </div>

    <label for="barra"><h2>PHP </h2><span id="porcentagemphp"></span></label>
    <div class="container-barra">
      <div class="barra" id="barraPhp"></div>
    </div>

    <label for="barra"><h2>SQL </h2><span id="porcentagemsql"></span></label>
    <div class="container-barra">
      <div class="barra" id="barraSql"></div>
    </div>
    
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

I made an example of how you could fill the bar, click the Click Me button to see the example working. Just do not understand the scroll part very well, do you want these bars to be visible to the user and they start to fill up? If yes, I made it that way for the progress bars of php and sql.