<div id="inputBox">
        <div id="register">
            <p>Register Your Device ID</p>
            <input id="textfield" name="ID" pattern="[0-9]{10}" placeholder="000-00-0000" maxlength="11" />
            <div id="progress">
                <div id="progFill"></div>
            </div>
            <button name='regButton'>Register</button>
        </div>
        <!-- Start Loader -->
        <div id="loader" class="hidden">
            <svg class="circular" viewBox="25 25 50 50">
                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="3" stroke-miterlimit="10" />
            </svg>
        </div>
        <!-- End Loader -->
        <div id="thankyou">
            <p>Your ID has been registered
                <p>
        </div>
    </div>

$PrimaryBrandColor: #3998b8;
$SiteBackgroundColor: #2f3d4a;
$box: #edf5fc;
$white: #fff;
$gray: #ddd;
$green: #38ab75;
$red: #f7556c;

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background: $SiteBackgroundColor;
  color: #434343;
  font-family: arial;
  font-size: 12px;
  letter-spacing: 0.5px;
}

#inputBox {
  background: $white;
  border-radius: 4px;
  box-shadow: 0 0 10px #161d23;
  display: block;
  margin: 60px auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}

#inputBox p {
  font-size: 23px;
  font-weight: bold;
}

input {
  border: 2px solid $gray;
  border-radius: 0px;
  display: block;
  font-size: 20px;
  margin: auto;
  outline: none;
  padding: 10px;
  text-align: center;
  transition: border 0.5s;
  width: 75%;
}

input:focus {
  border: 2px solid $PrimaryBrandColor;
}

#progress {
  background: $gray;
  height: 2px;
  margin: auto;
  overflow: hidden;
  width: 75%;
}

#progFill {
  background: $PrimaryBrandColor;
  height: 100%;
  transition: width 0.5s;
  width: 0%;
}

button {
  background: $PrimaryBrandColor;
  border: none;
  color: $white;
  cursor: pointer;
  font-size: 20px;
  margin: 10px auto 25px;
  padding: 10px 25px;
  text-transform: uppercase;
  transition: background 0.5s;
  width: 75%;
}

button:hover,
#progFill.success,
button.success {
  background: $green;
}

#thankyou {
  display: none;
}

.alert {
  border: 2px solid $red;
}

#inputBox.success {
  background: $green;
  color: $white;
}

#loader {
  position: relative;
  margin: 0 auto;
  width: 50px;
  height: 100px;
  transition: max-height 0.33s;
  &:before {
    content: "";
    display: block;
    padding-top: 100%;
  }
}

.circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

.hidden {
  display: none;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes color {
  100%,
  0% {
    stroke: $PrimaryBrandColor;
  }
  25% {
    stroke: $green;
  }
  50% {
    stroke: $PrimaryBrandColor;
  }
  75% {
    stroke: $green;
  }
}

var register = document.getElementById("register");
thankyou = document.getElementById("thankyou");
inField = document.getElementById("textfield");
progFill = document.getElementById("progFill");
button = document.querySelector('button[name="regButton"]');

inField.addEventListener("keyup", function inputCapt(evt) {
  // ID Field Styling
  var maxVal = this.maxLength;
  if (this.value.length == 3) {
    this.value = this.value + "-";
  } else if (this.value.length == 6) {
    this.value = this.value + "-";
  }

  // Progress Bar
  var prog = this.value.length / maxVal * 100;
  progFill.style.width = prog + "%";
  if (prog == 100) {
    progFill.classList.add("success");
    button.classList.add("success");
  } else {
    progFill.classList.remove("success");
    button.classList.remove("success");
  }

    button.addEventListener('click', function(e) {
        if (inField.value.length == maxVal) {
            document.getElementById("loader").classList.remove("hidden");
            register.style.display = "none";
            setTimeout(function() {
                document.getElementById("loader").classList.add("hidden");
              document.getElementById("inputBox").classList.add("success");
                thankyou.style.display = "block";
            }, 2000);
            
        } else {
            inField.classList.add("alert");
        }
    });
});