<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;
}
}
View Compiled
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");
}
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.