Breaking News: Grepper is joining You.com. Read the official announcement!

Progress bar with intervals

SAMER SAEID answered on May 12, 2022 Popularity 1/10 Helpfulness 1/10

answer Progress bar with intervals

related Progress bar with intervals

Progress bar with intervals

Comment

const checkpoints = [
  {
    perc: 25, 
    label: "25%\n<b>2018</b>"
  },
  {
    perc: 35, 
    label: "35%\n<b>2019</b>"
  },
  {
    perc: 45,
    label: "45%\n<b>2020</b>"
  },
  {
    perc: 55,
    label: "55%\n<b>2021</b>"
  },
  {
    perc: 100,
    label: "100%\n<b>2022</b>"
  }
];
const step = 1;
const timeInterval = 100;
const playLabel = 'PLAY';
const pauseLabel = 'PAUSE';

//on document ready..
$(document).ready(()=>{
  
  //shows checkpoints under the progressbar
  for(checkpoint of checkpoints){
    $('#rulers')
      .append(`<p class='ruler' style='width:${checkpoint.perc}%;'>${checkpoint.label}</p>`);
  }
        
  //attaches click event handler to #playpause button
  $('#playpause').on('click', (event)=>{ toggleButton( $(event.currentTarget) ) });
});

function toggleButton(playPauseButton){
  const status = $(playPauseButton).attr('data-status');  
  //if the button was in pause state (and having the Play label)
  if (status == "pausing"){        
    $(playPauseButton)        
      //toggles it to status 'playing'
      .attr('data-status', 'playing')
      //toggles it to "Pause" label
      .text(pauseLabel);    
    //begins incrementing the progressbar
    const intervals = checkpoints.map(cp => cp.perc);
    setProgressWithCheckpoints(intervals, step, timeInterval);
  }
  //if the button was in playing state (and having the Pause label)
  else if(status == 'playing'){
    $(playPauseButton)
      //toggles it to status 'pausing'
      .attr('data-status', 'pausing')
      //toggles it to "Play" label
      .text(playLabel);
    //if the progressbar is still running to complete its task,
    if( isStillRunning() === true ){
      //sets the playpause button as disabled so that you can't click it
      $(playPauseButton).prop('disabled', true);
    }
  }
}

//set the progressbar at perc
function setProgress(perc){    
  $(".progress .progress-bar")
    .css('width', `${perc}%`)
    .attr('aria-valuenow', perc)
  $(".progress .progress-bar span")
    .text(`${perc}%`);    
}

//get progressbar %
function getProgress(){
  const valueNow = $(".progress .progress-bar")
                    .attr('aria-valuenow');
  return parseInt(valueNow);
}

//return true/false if the progress is still running
function isStillRunning(){
  if ( $('#playpause').attr('data-stillrunning') == 'yes' )
    return true;
  return false;
}

//sets the state stillrunning to yes
function setStillRunning(){
  $('#playpause').attr('data-stillrunning', 'yes');
}

//sets the state stillrunning to no and enables the button (in case it was disabled)
function setNotStillRunning(){
  $('#playpause')
    .attr('data-stillrunning', 'no')
    .prop('disabled', false);
    
   if ( $('#playpause').attr('data-status') == 'playing' )
    toggleButton(  $('#playpause') );
}

function setProgressWithCheckpoints(intervals, step, ms){
  
   setStillRunning();
  
  const valueNow = getProgress();     
  const nextIntervals =
    intervals.filter((interval) => interval > valueNow);      
  const nextInterval =
    (nextIntervals.length > 0) ? nextIntervals[0] : null;

  const newValue = Math.min(nextInterval, valueNow+step);    
  setProgress(newValue);

  const playpauseStatus = $('#playpause').attr('data-status');

  //if progress got to 100% OR
  //   nextInterval got reached while the play button is in pause state
  if(newValue >= 100 || (nextInterval == newValue && playpauseStatus == 'pausing')){
     //ends the calling and set the button as notStillRunning
     setNotStillRunning();
  }
  //else
  else
    //call again the progress function
    setTimeout(()=>{setProgressWithCheckpoints(intervals, step, ms)}, ms);  
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: intervals javascript progress-bar

Link to this answer
Share Copy Link

Contributed on May 12 2022

SAMER SAEID

0 Answers Avg Quality 2/10

Closely Related Answers

Progress bar with intervals

Comment

.progress{  
  margin: 50px 20px 20px 0;
}

.progress{  
  display: flex;
  width: 100%;  
  height: 2rem;
  overflow: hidden;
  border: solid 1px lightgray;
  width: 100%;
}

.progress-bar{
  color: white;
  vertical-align: middle;
  font-weight: 600;  
  padding-top: 6px;
}

.progress-bar span{
  padding-left: 10px;
}

#rulers {
  position: relative;
  height: 3em;
  border-bottom: solid 1px lightgray;
}

#rulers .ruler{
  position: absolute;
  text-align: right;
  margin-top: 0;
  white-space: pre-line;
  border-right: solid 2px darkgray;
  padding-right: 4px;
  box-sizing: border-box;
}

#playpause {
  display: block;
  cursor: pointer;
  margin-top: 20px;
  padding: 2px 10px;
  font-size: 18px;
}

#playpause:disabled{
  cursor: not-allowed;
}

Popularity 1/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: css intervals progress-bar

Link to this answer
Share Copy Link

Contributed on May 12 2022

SAMER SAEID

0 Answers Avg Quality 2/10

Progress bar with intervals

Comment

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    aria-valuenow="0"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 0%;background: green;">
    <span></span>
  </div>
</div>

<div id="rulers">
</div>

<button id="playpause" data-status="pausing">PLAY</button>

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: intervals progress-bar whatever

Link to this answer
Share Copy Link

Contributed on May 12 2022

SAMER SAEID

0 Answers Avg Quality 2/10

Progress bar with intervals

Contents

More Related Answers

Progress bar with intervals

Closely Related Answers

Progress bar with intervals

Progress bar with intervals

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.