Form Loading Example

by Hugo Carneiro

HTML

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form data-next-transition="" data-next-section="" data-next-page="" class="form-horizontal " novalidate="">
                
                
                
                
                
                
                <!-- ADD THIS TO THE form-source.html RIGHT AFTER THE <form> TAG -->
                <div class="form-loading">
                    <div class="form-loading-anim"></div>
                    <div class="form-loading-content">Loading...</div>
                </div>
                <!-- END OF LOADING -->
                
                
                
                
                
                
                
                <fieldset>
                    <!-- Form Name <legend>Form name 2</legend>-->
                    <!-- Time input-->
                    <div class="form-group" data-validation-rule="timerule">
                        <label class="col-sm-6 control-label" for="timeinput9"><span class="not-required">(Optional)</span>Time</label>
                        <div class="col-sm-6">
                            <input id="timeinput9" name="timeinput9" type="time" class="form-control input-md validation " disabled="disabled">
                        </div>
                    </div>
                    <!-- Date input-->
                    <div class="form-group" data-validation-rule="daterule">
                        <label class="col-sm-6 control-label" for="dateinput8"><span class="not-required">(Optional)</span>Date</label>
                        <div class="col-sm-6">
                            <input id="dateinput8" name="dateinput8" type="date" class="form-control input-md validation " disabled="disabled">
                        </div>
                    </div>
                    <!-- Textarea -->
                    <div class="form-group" data-validation-rule="paragraphrule">
                        <label...

CSS

/* ALL CSS SHOULD ONLY BE ADDED TO THE APP SIDE */
 .form-horizontal {
    position: relative; /* THIS SHOULD BE ADDED TO THE APP SIDE ONLY; TO AN EXISTING CLASS IF EXISTS. */
}
.form-horizontal:after {
    content:'';
    opacity: 1;
    visibility: visible;
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: all;
    -webkit-transition: visibility 0.25s, opacity 0.25s ease;
    -moz-transition: visibility 0.25s, opacity 0.25s ease;
    transition: visibility 0.25s, opacity 0.25s ease;
}
.form-horizontal.ready:after {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0.25s, opacity 0.25s ease;
    -moz-transition: visibility 0.25s, opacity 0.25s ease;
    transition: visibility 0.25s, opacity 0.25s ease;
}
.form-horizontal .form-loading {
    visibility: visible;
    opacity: 1;
    position: absolute;
    z-index: 1;
    top: calc(50% - 44px);
    left: calc(50% - 65px);
    width: 130px;
    padding: 10px;
    -webkit-transition: visibility 0.25s, opacity 0.25s ease;
    -moz-transition: visibility 0.25s, opacity 0.25s ease;
    transition: visibility 0.25s, opacity 0.25s ease;
}
.form-horizontal .form-loading .form-loading-anim {
    background: url('http://i.giphy.com/3oEdv2Y0kTsS1SYkMM.gif') no-repeat center center;
    height: 44px
}
.form-horizontal .form-loading .form-loading-content {
    text-align: center;
    line-height: 24px;
    color: #333333;
}
.form-horizontal.ready .form-loading {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0.25s, opacity 0.25s ease;
    -moz-transition: visibility 0.25s, opacity 0.25s ease;
    transition: visibility 0.25s, opacity 0.25s ease;
}

JavaScript

/* YOU DON'T ACTUALLY NEED TO USE THE setTimeout BUT YOU MIGHT HAVE TOO. IF YOU DO PLAY AROUND WITH THE DELAY */
/* YOU JUST NEED TO ADD THE CLASS ready TO THE FORM WHEN THE CONTENT IS LOADED, CSS WILL TAKE CARE OF THE REST */
setTimeout(function () {
    $('.form-horizontal').addClass('ready');
}, 3000);