Loading Bar

In this example below you will see how to do a Loading Bar with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Cory2911, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Cory2911 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Loading Bar</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Cory2911/loading-bar-rdBpqX */
.container {
  width: 100%;
  height: 30px;
  border: 1px solid #bbb;
}

/*Downloaded from https://www.codeseek.co/Cory2911/loading-bar-rdBpqX */
function ProgressBar($progressBarContainer, numberOfIncrements) {
    this.currentProgress = 0;//Percent
    this.incrementAmount = Math.floor(100 / numberOfIncrements);//Percent

    this.$progressBar = $("<div class='progress-bar'></div>")
                            .css("width", "0%")
                            .css("height", "100%")
                            .css("transition", "width 0.25s") //According to current (2018) UX research, Optimum transition to appear "fast" is ~250 ms
                            .css("transition-timing-function", "ease-out")
                            .css("background-color", "blue");

    $progressBarContainer
         .append(this.$progressBar);

    console.info("Creating new Progress Bar with " + this.numberOfIncrements + " increments.");
}


ProgressBar.prototype.Increment = function () {
    console.trace("Incrementing Progress Bar from current progress of  " + this.currentProgress + "%.");

    this.currentProgress += this.incrementAmount;
    this.$progressBar.css("width", this.currentProgress + "%");

    console.trace("Incremented to " + this.currentProgress + "%.");
    if (this.currentProgress >= 100) {
        this.$progressBar.hide();
        console.trace("Hiding progress bar.")
    }
}

ProgressBar.prototype.Decrement = function () {
    console.trace("Decrementing Progress Bar from current progress of " + this.currentProgress + "%.");

    this.currentProgress -= this.incrementAmount;
    this.$progressBar.css("width", this.currentProgress + "%");

    console.trace("Decremented to " + this.currentProgress + ".");

    if (this.currentProgress <= 0) {
        console.trace("Hiding progress bar.")
        this.$progressBar.hide();
    }
}

ProgressBar.prototype.Reset = function () {
    console.trace("Resetting progress bar.");

    this.currentProgress = 0;
    this.$progressBar.css("width", "0%");
    this.$progressBar.hide();
}


ProgressBar.prototype.SetNumberOfIntervals = function(numberOfIntervals)
{
    console.trace("Settings number of intervals to " + numberOfIntervals);
    this.incrementAmount = Math.floor(100 / numberOfIntervals);
    this.Reset();
}

var bar = new ProgressBar($('.container'), 4);
setTimeout(bar.Increment.bind(bar), 500);
setTimeout(bar.Increment.bind(bar), 1000);
setTimeout(bar.Increment.bind(bar),250);
setTimeout(bar.Increment.bind(bar),750);

Comments