HTML
<form>
<input name="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" type="text" class="feedback-input" placeholder="Email" />
<textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
<button type="button" class="submit-btn">SUBMIT</button>
</form>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<h1 class="submit-feedback">YOUR FORM HAS BEEN SENT</h1>
CSS
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
body {
background: #1E1E28;
}
form {
max-width:420px;
margin:50px auto 30px;
border: 4px solid #34495e;
padding: 20px
}
.feedback-input {
color: white;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: transparent;
border:2px solid #2980b9;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width: 100%;
box-sizing: border-box;
outline: 0;
}
.feedback-input:focus {
border: 2px solid #2ecc71;
}
textarea {
height: 150px;
line-height: 150%;
resize: vertical;
}
.submit-btn {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
width: 100%;
background: #2980b9;
border-radius: 0;
border: 0;
cursor: pointer;
color: white;
font-size: 24px;
padding-top: 10px;
padding-bottom: 10px;
transition: all 0.3s;
margin-top: -4px;
font-weight: 100;
}
.submit-btn:hover {
background:#3498db;
letter-spacing: 8px;
}
.submit-feedback {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 30px;
text-align: center;
color: #fff;
display: none;
}
/* Submit Loader */
/*==============*/
.spinner {
display: none;
margin: 0 auto 0;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #2980b9;
border-radius: 100%;
display: inline-block;
animation: bouncedelay 1.4s infinite ease-in-out;
animation-fill-mode: both;
}
.spinner .bounce1 {
animation-delay: -0.32s;
}
.spinner .bounce2 {
animation-delay: -0.16s;
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
} 40% {
transform: scale(1.0);
}
}
JAVASCRIPT
// NOT DONE YET :)
$(document).ready(function(){
$('.submit-btn').on('click', function(){
$('.spinner')
.fadeIn("fast")
.delay(2000)
.fadeOut('slow', function() {
$('.submit-feedback').fadeIn();
});
});
});
