Button with Progress Indicator

In this example below you will see how to do a Button with Progress Indicator with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Button with Progress Indicator</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="stage">
  <button class="progress-button">
  <span class="content">Upload</span>
  <span class="value"></span>
  <span class="progress"></span> 
  </button>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/GuillaumeChabot/button-with-progress-indicator-oEOvRj */
body {
  background: #fff;
  margin: 0px;
}

::-moz-selection {
  background: rgba(17, 209, 198, 0.5);
  /* WebKit/Blink Browsers */
}

::selection {
  background: rgba(17, 209, 198, 0.5);
  /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: rgba(17, 209, 198, 0.5);
  /* Gecko Browsers */
}

/*color*/
/*fonts*/
h1,
h2,
h3,
h4,
h5,
body {
  font-family: Graphik, Roboto, Arial, sans-serif;
  color: #222222;
  line-height: 1.1;
  letter-spacing: 0;
}

h5,
h6,
body {
  font-weight: 400;
}

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

button {
  position: relative;
  display: table-cell;
  padding: 16px 0px;
  width: 184px;
  height: 52px;
  border: none;
  background: #39dd91;
  font-size: 18px;
  color: #fff;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

button:hover,
button:focus {
  outline: none;
  cursor: pointer;
}

button:hover {
  background: #65e4a9;
}

.content {
  position: relative;
  display: block;
  top: 0px;
  z-index: 199;
}

.value {
  position: relative;
  display: block;
  z-index: 99;
  top: -84px;
}

.progress {
  position: relative;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  background: #0da299;
  width: 0%;
  z-index: 0;
}

.progress[data-progress="1"] {
  content: "";
  background: #0da299;
  width: 1%;
}

.progress[data-progress="2"] {
  content: "";
  background: #0da299;
  width: 2%;
}

.progress[data-progress="3"] {
  content: "";
  background: #0da299;
  width: 3%;
}

.progress[data-progress="4"] {
  content: "";
  background: #0da299;
  width: 4%;
}

.progress[data-progress="5"] {
  content: "";
  background: #0da299;
  width: 5%;
}

.progress[data-progress="6"] {
  content: "";
  background: #0da299;
  width: 6%;
}

.progress[data-progress="7"] {
  content: "";
  background: #0da299;
  width: 7%;
}

.progress[data-progress="8"] {
  content: "";
  background: #0da299;
  width: 8%;
}

.progress[data-progress="9"] {
  content: "";
  background: #0da299;
  width: 9%;
}

.progress[data-progress="10"] {
  content: "";
  background: #0da299;
  width: 10%;
}

.progress[data-progress="11"] {
  content: "";
  background: #0da299;
  width: 11%;
}

.progress[data-progress="12"] {
  content: "";
  background: #0da299;
  width: 12%;
}

.progress[data-progress="13"] {
  content: "";
  background: #0da299;
  width: 13%;
}

.progress[data-progress="14"] {
  content: "";
  background: #0da299;
  width: 14%;
}

.progress[data-progress="15"] {
  content: "";
  background: #0da299;
  width: 15%;
}

.progress[data-progress="16"] {
  content: "";
  background: #0da299;
  width: 16%;
}

.progress[data-progress="17"] {
  content: "";
  background: #0da299;
  width: 17%;
}

.progress[data-progress="18"] {
  content: "";
  background: #0da299;
  width: 18%;
}

.progress[data-progress="19"] {
  content: "";
  background: #0da299;
  width: 19%;
}

.progress[data-progress="20"] {
  content: "";
  background: #0da299;
  width: 20%;
}

.progress[data-progress="21"] {
  content: "";
  background: #0da299;
  width: 21%;
}

.progress[data-progress="22"] {
  content: "";
  background: #0da299;
  width: 22%;
}

.progress[data-progress="23"] {
  content: "";
  background: #0da299;
  width: 23%;
}

.progress[data-progress="24"] {
  content: "";
  background: #0da299;
  width: 24%;
}

.progress[data-progress="25"] {
  content: "";
  background: #0da299;
  width: 25%;
}

.progress[data-progress="26"] {
  content: "";
  background: #0da299;
  width: 26%;
}

.progress[data-progress="27"] {
  content: "";
  background: #0da299;
  width: 27%;
}

.progress[data-progress="28"] {
  content: "";
  background: #0da299;
  width: 28%;
}

.progress[data-progress="29"] {
  content: "";
  background: #0da299;
  width: 29%;
}

.progress[data-progress="30"] {
  content: "";
  background: #0da299;
  width: 30%;
}

.progress[data-progress="31"] {
  content: "";
  background: #0da299;
  width: 31%;
}

.progress[data-progress="32"] {
  content: "";
  background: #0da299;
  width: 32%;
}

.progress[data-progress="33"] {
  content: "";
  background: #0da299;
  width: 33%;
}

.progress[data-progress="34"] {
  content: "";
  background: #0da299;
  width: 34%;
}

.progress[data-progress="35"] {
  content: "";
  background: #0da299;
  width: 35%;
}

.progress[data-progress="36"] {
  content: "";
  background: #0da299;
  width: 36%;
}

.progress[data-progress="37"] {
  content: "";
  background: #0da299;
  width: 37%;
}

.progress[data-progress="38"] {
  content: "";
  background: #0da299;
  width: 38%;
}

.progress[data-progress="39"] {
  content: "";
  background: #0da299;
  width: 39%;
}

.progress[data-progress="40"] {
  content: "";
  background: #0da299;
  width: 40%;
}

.progress[data-progress="41"] {
  content: "";
  background: #0da299;
  width: 41%;
}

.progress[data-progress="42"] {
  content: "";
  background: #0da299;
  width: 42%;
}

.progress[data-progress="43"] {
  content: "";
  background: #0da299;
  width: 43%;
}

.progress[data-progress="44"] {
  content: "";
  background: #0da299;
  width: 44%;
}

.progress[data-progress="45"] {
  content: "";
  background: #0da299;
  width: 45%;
}

.progress[data-progress="46"] {
  content: "";
  background: #0da299;
  width: 46%;
}

.progress[data-progress="47"] {
  content: "";
  background: #0da299;
  width: 47%;
}

.progress[data-progress="48"] {
  content: "";
  background: #0da299;
  width: 48%;
}

.progress[data-progress="49"] {
  content: "";
  background: #0da299;
  width: 49%;
}

.progress[data-progress="50"] {
  content: "";
  background: #0da299;
  width: 50%;
}

.progress[data-progress="51"] {
  content: "";
  background: #0da299;
  width: 51%;
}

.progress[data-progress="52"] {
  content: "";
  background: #0da299;
  width: 52%;
}

.progress[data-progress="53"] {
  content: "";
  background: #0da299;
  width: 53%;
}

.progress[data-progress="54"] {
  content: "";
  background: #0da299;
  width: 54%;
}

.progress[data-progress="55"] {
  content: "";
  background: #0da299;
  width: 55%;
}

.progress[data-progress="56"] {
  content: "";
  background: #0da299;
  width: 56%;
}

.progress[data-progress="57"] {
  content: "";
  background: #0da299;
  width: 57%;
}

.progress[data-progress="58"] {
  content: "";
  background: #0da299;
  width: 58%;
}

.progress[data-progress="59"] {
  content: "";
  background: #0da299;
  width: 59%;
}

.progress[data-progress="60"] {
  content: "";
  background: #0da299;
  width: 60%;
}

.progress[data-progress="61"] {
  content: "";
  background: #0da299;
  width: 61%;
}

.progress[data-progress="62"] {
  content: "";
  background: #0da299;
  width: 62%;
}

.progress[data-progress="63"] {
  content: "";
  background: #0da299;
  width: 63%;
}

.progress[data-progress="64"] {
  content: "";
  background: #0da299;
  width: 64%;
}

.progress[data-progress="65"] {
  content: "";
  background: #0da299;
  width: 65%;
}

.progress[data-progress="66"] {
  content: "";
  background: #0da299;
  width: 66%;
}

.progress[data-progress="67"] {
  content: "";
  background: #0da299;
  width: 67%;
}

.progress[data-progress="68"] {
  content: "";
  background: #0da299;
  width: 68%;
}

.progress[data-progress="69"] {
  content: "";
  background: #0da299;
  width: 69%;
}

.progress[data-progress="70"] {
  content: "";
  background: #0da299;
  width: 70%;
}

.progress[data-progress="71"] {
  content: "";
  background: #0da299;
  width: 71%;
}

.progress[data-progress="72"] {
  content: "";
  background: #0da299;
  width: 72%;
}

.progress[data-progress="73"] {
  content: "";
  background: #0da299;
  width: 73%;
}

.progress[data-progress="74"] {
  content: "";
  background: #0da299;
  width: 74%;
}

.progress[data-progress="75"] {
  content: "";
  background: #0da299;
  width: 75%;
}

.progress[data-progress="76"] {
  content: "";
  background: #0da299;
  width: 76%;
}

.progress[data-progress="77"] {
  content: "";
  background: #0da299;
  width: 77%;
}

.progress[data-progress="78"] {
  content: "";
  background: #0da299;
  width: 78%;
}

.progress[data-progress="79"] {
  content: "";
  background: #0da299;
  width: 79%;
}

.progress[data-progress="80"] {
  content: "";
  background: #0da299;
  width: 80%;
}

.progress[data-progress="81"] {
  content: "";
  background: #0da299;
  width: 81%;
}

.progress[data-progress="82"] {
  content: "";
  background: #0da299;
  width: 82%;
}

.progress[data-progress="83"] {
  content: "";
  background: #0da299;
  width: 83%;
}

.progress[data-progress="84"] {
  content: "";
  background: #0da299;
  width: 84%;
}

.progress[data-progress="85"] {
  content: "";
  background: #0da299;
  width: 85%;
}

.progress[data-progress="86"] {
  content: "";
  background: #0da299;
  width: 86%;
}

.progress[data-progress="87"] {
  content: "";
  background: #0da299;
  width: 87%;
}

.progress[data-progress="88"] {
  content: "";
  background: #0da299;
  width: 88%;
}

.progress[data-progress="89"] {
  content: "";
  background: #0da299;
  width: 89%;
}

.progress[data-progress="90"] {
  content: "";
  background: #0da299;
  width: 90%;
}

.progress[data-progress="91"] {
  content: "";
  background: #0da299;
  width: 91%;
}

.progress[data-progress="92"] {
  content: "";
  background: #0da299;
  width: 92%;
}

.progress[data-progress="93"] {
  content: "";
  background: #0da299;
  width: 93%;
}

.progress[data-progress="94"] {
  content: "";
  background: #0da299;
  width: 94%;
}

.progress[data-progress="95"] {
  content: "";
  background: #0da299;
  width: 95%;
}

.progress[data-progress="96"] {
  content: "";
  background: #0da299;
  width: 96%;
}

.progress[data-progress="97"] {
  content: "";
  background: #0da299;
  width: 97%;
}

.progress[data-progress="98"] {
  content: "";
  background: #0da299;
  width: 98%;
}

.progress[data-progress="99"] {
  content: "";
  background: #0da299;
  width: 99%;
}

.progress[data-progress="100"] {
  content: "";
  background: #0da299;
  width: 100%;
}

.move-down {
  transition: all 0.55s ease;
  -webkit-transform: translateY(300%);
  transform: translateY(300%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.move-up {
  transition: all 0.55s ease;
  -webkit-transform: translateY(-6%);
  transform: translateY(-6%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/*Downloaded from https://www.codeseek.co/GuillaumeChabot/button-with-progress-indicator-oEOvRj */
(function() {
  let $element = {},
    $content = "",
    $self;

  class Button {
    constructor(element, content) {
      ($self = this), ($element = element), ($content = content);

      $element.on("click", $self.OnStart);
    }

    OnStart() {
      $element.off("click");
      $(".progress").attr("data-progress", "0");
      $(".value, .content").removeClass("move-up");
      $(".content").html("Upload");
      $self.Update(0);
    }

    Update(progress) {
      if (progress >= 100) {
        $(".progress").attr("data-progress", 100);
        return $self.OnFinish();
      } else {
        $(".value, .content").addClass("move-down");
        $(".progress").attr("data-progress", progress);
        $(".value").text(progress + "%");

        var rand = Math.round(Math.random() * 60);
        progress += Math.floor(Math.random() * 4) + 1;
        return window.setTimeout(() => {
          $self.Update(progress);
          console.log(rand);
        }, rand);
      }
    }

    OnFinish() {
      $(".value, .content")
        .removeClass("move-down")
        .addClass("move-up");
      $(".content").html('<i class="material-icons">check</i>');
      $element.on("click", $self.OnStart);
    }
  }

  var btn = new Button($(".progress-button"), "");
})();

Comments