LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

want more information?

Success!

Contact Us Today

We’ll be in touch shortly.
In the meantime,
check out our
weekly offerings.

CSS
html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/form-bk.jpg") no-repeat center center;
  background-size: cover;
  font-family: 'Lato', sans-serif;
}

form {
  background: #faf5f3;
  width: 280px;
  margin-top: 50px;
  margin-bottom: 50px;
  position: absolute;
  z-index: 10;
  padding: 60px 60px 80px;
  left: 50%;
  margin-left: -230px;
  opacity: 0.85;
}
form h2 {
  text-transform: uppercase;
  text-align: center;
  font-size: 18px;
  color: #2f1f1e;
  letter-spacing: 0.061em;
  margin-top: 60px;
  margin-bottom: 20px;
}
form h2.success {
  color: #356e64;
  margin-top: -40px;
  margin-bottom: 0px;
  padding: 0;
}
form p.success-dialog {
  margin-top: -150px;
  color: #356e64;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.8em;
  text-transform: uppercase;
}
form p.success-dialog a {
  color: #9d775f;
  text-decoration: none;
  transition: 0.8s all ease;
}
form p.success-dialog a:hover {
  color: #c08159;
  transition: 0.4s all ease;
}
form input {
  width: 100%;
  background: #fff;
  text-align: center;
  margin-bottom: 25px;
  box-shadow: none;
  appearance: none;
  border: none;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #ebd7cf;
  padding-top: 8px;
  padding-bottom: 8px;
  text-transform: uppercase;
  font-size: 11px;
  position: relative;
  z-index: 500;
  letter-spacing: 0.06em;
}
form input:focus {
  border: 1px solid #ebd7cf;
  outline: none;
  appearance: none;
}
form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}
form .submit {
  padding-top: 12px;
  padding-bottom: 12px;
  border: none;
  text-transform: uppercase;
  font-size: 11px;
  position: relative;
  z-index: 500;
  letter-spacing: 0.06em;
  text-align: center;
  cursor: pointer;
  background: #ec7242;
  color: #fff;
  width: 101%;
  transition: 0.8s all ease;
}
form .submit:hover {
  background: #d6673c;
  transform: translateY(1px);
  transition: 0.4s all ease;
}

#firstname {
  margin-top: 20px;
}

.circle {
  padding: 15px;
  height: 25px;
  width: 25px;
  margin-top: -80px;
  margin-left: 115px;
  position: absolute;
  z-index: 20;
  border-radius: 50%;
  clear: both;
  opacity: 0.8;
}

.circle-quill {
  border: 1px solid #ebd7cf;
  background: #fff;
}

.circle-paper {
  border: 1px solid #9ac0ba;
  background: #5d978e;
}

.submit-under, .loader, .loader2, .circle-paper, p.success-dialog, h2.success {
  visibility: hidden;
}

.submit-under {
  background: #8c6e7a;
  width: 291px;
  height: 45px;
  margin-top: -40px;
  margin-left: -4px;
  position: absolute;
  z-index: -1;
}

.loader, .loader2 {
  position: absolute;
  z-index: -5;
  margin-top: -45px;
  margin-left: 114px;
}
JS
$(document).ready(function(){
  tl = new TimelineLite();
  var form = $(".sub-form"),
      sub = $(".submit-under"),
  		allsub = $(".allsub"),
      loader = $(".loader circle"),
      loader2 = $(".loader2 circle"),
      loaders = [loader, loader2],
      circP = $(".circle-paper");
  
  TweenMax.set(sub, {opacity:0.7, rotationY:90}); 
  TweenMax.set($(".submit-under, .loader, .loader2, .circle-paper, p.success-dialog, h2.success"), {visibility:"visible"}); 
  TweenMax.set(loader, {drawSVG:'100% 100%', rotation:-90});
  TweenMax.set(circP, {scaleY:0, transformOrigin:"50% 50%"});
  TweenMax.set([loader2, circP], {opacity:0});
  TweenMax.set($(".success, .success-dialog"), {opacity:0});
  
  $(".submit").on("click", function(e) {
    e.preventDefault;
    tl.to(sub, 1, {opacity:1, rotationY:0, ease:Expo.easeOut});
    tl.add("flip");
    tl.to($(".submit"), 0.5, {rotationX:90, ease:Circ.easeOut}, "flip-=1.5");
    tl.to($(".submit"), 0.5, {opacity:0}, "flip-=0.5");
    tl.to(sub, 0.25, {css:{borderRadius: "50%", backgroundColor:"#d6c7ca"}, ease:Circ.easeOut}, "flip-=0.5");
    tl.to(sub, 1.2, {scaleX:0.16,  transformOrigin:"50% 50%", ease:Expo.easeOut}, "flip-=0.5");
  tl.fromTo(loader, 1, {transformOrigin:"50% 50%", drawSVG:"50% 50%"}, {transformOrigin:"50% 50%", drawSVG:"100%"}, "flip+=1");
  tl.to(sub, 0.8, {rotationX:90, scaleY:0}, "flip+=1.2");
  tl.to(loader2, 0.1, {opacity:1}, "flip+=1.8");
  tl.to(loader2, 0.5, {opacity:1, transformOrigin:"50% 50%", scaleX:0, rotation:180}, "flip+=2");
 	tl.to(loader2, 0.5, {opacity:1, transformOrigin:"50% 50%", scaleX:1, rotation:180}, "flip+=2.5");
   tl.add("success");
   tl.to($(".circle-quill"), 0.5, {scaleY:0, transformOrigin:"50% 50%", ease:Circ.easeOut}, "success");
   tl.to(circP, 0.5, {scaleY:1, opacity:1, transformOrigin:"50% 50%", ease:Circ.easeIn}, "success");
   tl.to($(".circle-quill"), 0.5, {scaleY:0, transformOrigin:"50% 50%", ease:Circ.easeOut}, "success");
   tl.to($("input"), 0.5, {scaleY:0}, "success");
   tl.to($(".info"), 0.5, {scaleY:0}, "success");
   tl.to($(".success"), 0.5, {scaleY:1, opacity: 1}, "success+=1");
   tl.to($(".success-dialog"), 1, {opacity: 1}, "success+=1");
   tl.to(loaders, 0.5, {scaleY:0, stroke:"#b1dbd3", transformOrigin:"50% 50%"}, "success");
   tl.to(form, 0.5, {css:{backgroundColor:"#7aada5"}}, "success");
  });
});

Description

Demo'ing how animation can aid in User Experience. In this case the user knows the submit button functions, then has a loader to let them know they are waiting, which becomes a success screen. The animations keep the viewer occupied while the loading happens in the background.
Term
Mon, 11/27/2017 - 21:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv