Signup Form shows progressive disclosure and micro-interaction

This is Sign Up Form With Progressive Disclosure and Micro Interaction developed using CSS, HTML and JavaScript. Progressive Disclosure means showing information or action when a user actually needs it. This same concept can also be applied to Login Forms. Demo and Download available.

HTML Snippet

<div id="app-cover">
  <h1 id="heading">Sign Up</h1>
  <form method="post" action="" autocomplete="off">
    <div id="inp-box-cover">
      <div id="inp-padd">
        <div class="inp-box" id="email">
          <input type="email" class="inp" placeholder="Your email address" spellcheck="false" autocomplete="off">
        </div>
        <div class="inp-box" id="username">
          <input type="text" class="inp" placeholder="Your username" spellcheck="false">
        </div>
        <div class="inp-box" id="password">
          <input type="password" class="inp" placeholder="Password (More than 5 characters)">
        </div>
        <div id="prev-action-btn"><i class="fas fa-chevron-circle-left"></i></div>
        <div id="next-action-btn"><i class="fas fa-chevron-circle-right"></i></div>
      </div>
      <div id="progress-bar-cover">
        <div id="progress">
          <div id="working">Working<i class="fas fa-sync-alt fa-spin"></i></div>
          <div id="acc-success">Account Created<i class="fas fa-check"></i><span id="init-login">Login now</span></div>
        </div>
      </div>
    </div>
  </form>
</div>

CSS Code

*
{
    outline: none;
}

html, body
{
    height: 100%;
    min-height: 100%;
}

body
{
    margin: 0;
}

input
{
    display: block;
    width: 100%;
    color: #424245;
    font-size: 16px;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
}

input::-webkit-input-placeholder
{ 
	color: #9999a2;
}

input:-ms-input-placeholder
{ 
	color: #9999a2;
}

input::-moz-placeholder
{ 
	color: #9999a2;
	opacity: 1;
}

input:-moz-placeholder
{ 
	color: #9999a2;
	opacity: 1;
}

#password input::placeholder
{
    font-weight: normal;
    letter-spacing: 0;
}

#password input
{
    font-weight: bold;
    letter-spacing: 4px;
}

#password input::-webkit-input-placeholder
{ 
    font-weight: normal;
    letter-spacing: 0;
}

#password input:-ms-input-placeholder
{ 
    font-weight: normal;
    letter-spacing: 0;
}

#password input::-moz-placeholder
{ 
    font-weight: normal;
    letter-spacing: 0;
}

#password input:-moz-placeholder
{ 
    font-weight: normal;
    letter-spacing: 0;
}

body, input
{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#app-cover
{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    max-width: 420px;
    padding: 20px;
    margin: -70px auto 0 auto;
}

#heading
{
    color: #5f5f64;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    margin: 0 0 20px 0;
}

#inp-box-cover
{
    position: relative;
    width: 111px;
    height: 6px;
    background-color: #f4f4f4;
    border-radius: 4px;
    overflow: hidden;
    transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) all, 0s ease border;
}

#heading
{
    transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) all;
}

#app-cover.active #heading
{
    margin-top: -57px;
    margin-bottom: 77px;
}

#app-cover.active #inp-box-cover
{
    width: 420px;
    height: 57px;
    margin-top: -57px;
    border: 1px solid #5f5f64;
    box-shadow: inset 0 2px 2px #fff;
}

#inp-padd
{
    padding: 15px 0 21px 15px;
}

.inp-box
{
    position: relative;
    bottom: -36px;
    padding-right: 87px;
    opacity: 0;
    transition: 0.6s ease-in-out all, 1.2s ease-out opacity;
}

.inp-box.active
{
    bottom: 0;
    opacity: 1;
}

.inp-box#username.active
{
    bottom: 21px;
}

.inp-box#password.active
{
    bottom: 42px;
}

.inp-box.inactive
{
    bottom: 36px;
    opacity: 0;
}

.inp-box#username.inactive
{
    bottom: 57px;
}

.inp-box#password.inactive
{
    bottom: 78px;
}

#prev-action-btn, #next-action-btn
{
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    width: 28.5px;
    height: 51px;
    cursor: pointer;
    overflow: hidden;
}

#prev-action-btn
{
    right: 43.5px;
}

#next-action-btn i, #prev-action-btn i
{
    position: relative;
    left: -5px;
    display: block;
    width: 21px;
    color: #5f5f64;
    font-size: 21px;
    padding: 15px 0 15px 7.5px;
    line-height: 1;
    opacity: 0;
    transition: 0.3s ease-in-out all;
    cursor: pointer;
}

#prev-action-btn i
{
    left: 5px;
    padding-left: 0;
    padding-right: 7.5px;
}

#prev-action-btn.active i, #next-action-btn.active i
{
    left: 0;
    opacity: 1;
}

#progress-bar-cover
{
    position: absolute;
    top: 51px;
    bottom: 0;
    left: 0;
    height: 6px;
    width: 100%;
    background-color: #e7e7e7;
    transition:0.5s ease all;
    z-index: 1;
}

#progress-bar-cover.hide-form
{
    top: 0;
    height: 100%;
}

#progress
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    color: transparent;
    width: 0%;
    background-color: #5f5f64;
    transition: 0.5s ease all;
}

#progress-bar-cover.hide-form #progress
{
    width: 100%;
    color: #fff;
    text-align: center;
    padding: 16px 0;
}

#progress i
{
    margin-left: 5px;
}

#working
{
    font-size: 16px;
    line-height: 1;
    padding: 3.5px;
    transform: scale(1);
    display: none;
}

#working.inactive
{
    transform: scale(0);
    transition: 0.5s ease all;
}

#working i
{
    position: relative;
    top: -1px;
    display: inline-block;
    color: #9c9c9c;
    font-size: 15px;
    margin-left: 5px;
    vertical-align: middle;
}

#acc-success
{
    position: absolute;
    top: 57px;
    right: 0;
    left: 0;
    padding: 16px 0;
    opacity: 0;
    transition: 0.5s ease all;
}

#acc-success.active
{
    top: 0;
    bottom: 0;
    opacity: 1;
}

#init-login
{
    float: right;
    font-size: 14px;
    line-height: 1;
    padding: 6px 10px 8px 10px;
    margin: -1px 15px 0 0;
    cursor: pointer;
    border-radius: 20px;
    background-color: #7d7d7d;
    box-shadow: 0 0 0 1px #4d4d4d;
}

JavaScript Snippet

$(function()
{
    var app_cover = $('#app-cover'), inp = $('.inp'), prevAction = $('#prev-action-btn'), nextAction=$('#next-action-btn'), stepComplete = false, progress = $('#progress'), timeOut = null, stepsArr = ['email','username','password'], stepNumber = 1, lastCompletedStep=0, totalSteps = stepsArr.length;

    function checkApp()
    {
        if( stepNumber > 1 )
            return;

        var active = false;
        inp.each(function()
        {
            if( $(this).val().trim().length > 0 )
                active = true;
        });

        if( active )
            app_cover.addClass('active');
        else
        {
            app_cover.removeClass('active');
            inp.parent('div').removeClass('active');
        }
    }

    function _a()
    {
        nextAction.addClass('active');
        stepComplete = true;
        if( lastCompletedStep < stepNumber )
            lastCompletedStep = stepNumber;
    }

    function _b()
    {
        nextAction.removeClass('active');
        stepComplete = false;
    }

    function checkInput()
    {
        var _this = $(this), regex, index = stepNumber - 1, _val = _this.val().trim();
        if( stepsArr[index] == 'email' )
        {
            regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if(regex.test(_val))
                _a();
            else
                _b();
        }
        else if( stepsArr[index] == 'username' )
        {
            clearTimeout(timeOut);
            timeOut = setTimeout(function()
            {
                if( _val.length > 0 )
                    _a();
                else
                    _b();
            },500);
        }
        else if( stepsArr[index] == 'password' )
        {
            if(_val.length >= 5)
                _a();
            else
                _b();
        }
    }

    function clearForm()
    {
        inp.val('');
        $('.inp-box').removeClass('active inactive');
        nextAction.removeClass('active');
        prevAction.removeAttr('class');
        nextAction.removeAttr('class');
    }

    function moveToPreviousStep()
    {
        --stepNumber;

        if(stepNumber < 1)
        {
            stepNumber = 1;
            prevAction.removeClass('active');
            return;
        }
        else
        {
            if(stepNumber == 1)
                prevAction.removeClass('active');

            if( stepNumber <= lastCompletedStep )
                stepComplete = true;

            nextAction.addClass('active');

            progress.width( (((stepNumber-1)/totalSteps)*100)+'%');
            $('#'+stepsArr[stepNumber]).removeClass('active');
            $('#'+stepsArr[stepNumber - 1]).removeClass('inactive');
        }
    }

    function moveToNextStep()
    {
        if(stepComplete && ($('#'+stepsArr[stepNumber - 1]).find('.inp').val().trim().length > 0) )
        {
            progress.width( ((stepNumber/totalSteps)*100)+'%');

            prevAction.addClass('active');

            if( stepNumber == totalSteps )
            {
                setTimeout(function()
                {
                    $('#progress-bar-cover').addClass('hide-form');

                    $('#working').fadeIn(0);

                    setTimeout(function()
                    {
                        $('#working').addClass('inactive');
                        clearForm();
                    },2300);

                    setTimeout(function()
                    {
                        $('#acc-success').addClass('active');
                    },3300);

                },500);

                return;    
            }

            $('#'+stepsArr[stepNumber-1]).addClass('inactive');
            $('#'+stepsArr[stepNumber]).addClass('active');

            if( stepNumber > lastCompletedStep )
            {
                lastCompletedStep = stepNumber;
                stepComplete = false;
            }

            ++stepNumber; // Now on next step     
        
            if( (stepNumber <= lastCompletedStep) && ($('#'+stepsArr[stepNumber - 1]).find('.inp').val().trim().length > 0)  )
                nextAction.addClass('active');
            else
                nextAction.removeClass('active');
        }
    }

    app_cover.hover( function()
    { 
        var f_elm = $('#'+stepsArr[0]); 
        if( ! $(this).hasClass('active') )
        {
            $(this).addClass('active');
            f_elm.addClass('active');
            setTimeout(function(){ f_elm.find('input').focus(); },1205);
            stepNumber = 1;
            lastCompletedStep = 0;
            stepComplete = false;
        }
    }, 
    function()
    { 
        checkApp();
    });

    inp.on('keyup',checkInput);

    prevAction.on('click',moveToPreviousStep);
    nextAction.on('click',moveToNextStep);
});

Preview