JSFiddle - React, Tailwind, and code Playground

by Rafael Hovhannisyan

HTML

<form class="progressFrom" action="http://sololearn.com">
    	<h1>Sample Progress Form</h1>

    <div class="progressWrap">
        <progress max="100" value="0" class="progress"></progress>
        <div class="progressMessage">Start filling in the form.</div>
    </div>
    <dl class="formInputs">	<dt>
				<label for="name">Name</label>
			</dt>

        <dd>
            <input type="text" name="name" id="name" placeholder="Name" required="required" />
        </dd>	<dt>
				<label for="city">City</label>
			</dt>

        <dd>
            <input type="text" name="city" id="city" placeholder="City" required="required" />
        </dd>	<dt>
				<label for="address">Address</label>
			</dt>

        <dd>
            <input type="text" name="address" id="address" placeholder="Address" required="required" />
        </dd>	<dt>
				<label for="zip">Zip Code</label>
			</dt>

        <dd>
            <input type="text" name="zip" id="zip" maxlength="10" pattern="[0-9]*" placeholder="Zip Code" required="required" />
        </dd>
    </dl>
    <input type="submit" value="Submit" />
</form>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font-family:'Open Sans', sans-serif;
}
.progressFrom {
    width: 400px;
    margin: 20px auto 0;
    border: solid 1px #cbc9c9;
    background-color: #fff;
    padding: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}
h1 {
    background: #1abc9c;
    padding: 10px 0;
    font-size: 130%;
    font-weight: 300;
    text-align: center;
    color: #fff;
}
.progressWrap {
    margin: 20px auto;
    width: 100%;
}
progress {
    background-color: #f3f3f3;
    border: 0;
    height: 20px;
    width: 100%;
    border-radius: 10px;
}
progress::-webkit-progress-bar {
    background-color: #e0eaf0;
    border-radius: 10px;
}
progress::-webkit-progress-value {
    background-color: #1abc9c;
    border-radius: 10px;
}
progress::-moz-progress-bar {
    background-color: #329ad1;
    border-radius: 10px;
}
progress::-moz-progress-value {
    background-color: #1abc9c;
    border-radius: 10px;
}
.progressMessage {
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
    font-weight: bold;
}
.formInputs {
    width: 100%;
}
.formInputs dt {
    text-align: center;
}
.formInputs dt label {
    display: inline-block;
    font-weight: bold;
    margin-bottom: 10px;
}
input[type=text] {
    width: 90%;
    background: #fff;
    margin-bottom: 4%;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 4%;
    font-size: 95%;
    color: #555;
    font-family:'Open Sans', sans-serif;
    ;
}
input:focus {
    outline-style: solid;
    outline-width: 2px;
    outline-color: #1abc9c;
}
input[type="submit"] {
    width: 100%;
    background: #1abc9c;
    border: 0;
    padding:...

JavaScript

$(".progressFrom input").keyup(function () {
    
    var numValid = 0;
    $(".progressFrom input[required]").each(function () {
        if (this.validity.valid) {
            numValid++;
        }
    });

    var $progress = $(".progress"),
        $progressMessage = $(".progressMessage");
    
    if (numValid === 0) {
        $progress.attr("value", "0");
        $progressMessage.text("Start filling in the form");
    }
    if (numValid == 1) {
        $progress.attr("value", "25");
        $progressMessage.text("There you go, great start!");
    }
    if (numValid == 2) {
        $progress.attr("value", "50");
        $progressMessage.text("Nothing can stop you now");
    }
    if (numValid == 3) {
        $progress.attr("value", "75");
        $progressMessage.text("Almost there!");
    }
    if (numValid == 4) {
        $progress.attr("value", "100");
        $progressMessage.text("All done! Press Submit to finish");
    }
});