LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Doing my job ...
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);
* {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: 'Open Sans', sans-serif;
  background: url(//c2.staticflickr.com/8/7195/6940674791_4a0aee8957_b.jpg) center center;
  background-size: cover;
  overflow: hidden;
}
.wrapper {
  margin-top: 100px;
  perspective: 800px;
}
.boxes-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  perspective: 800px;
}
.boxes-wrapper .inner-table {
  display: table;
  width: 100%;
  height: 100%;
}
.boxes-wrapper .inner-table .inner-cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
}
.boxes-wrapper .loading-box {
  position: absolute;
  left: -280px;
  top: 50%;
  margin-top: -50px;
  height: 100px;
  width: 280px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  color: white;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.boxes-wrapper .loading-box.in-mid {
  left: 50%;
  transition: all 0.3s;
  margin-left: -140px;
}
.boxes-wrapper .loading-box.out-right {
  left: 100%;
  margin-left: 0;
}
.boxes-wrapper .login-box {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -140px;
  margin-top: -200px;
  width: 280px;
  height: 400px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  color: white;
  font-size: 14px;
  font-weight: 100;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: all 0.3s;
}
.boxes-wrapper .login-box.loading {
  transform: rotate3d(1, 0, 0, 90deg);
  transform-origin: 50% 100%;
  pointer-events: none;
}
.boxes-wrapper .login-box .header {
  font-size: 24px;
  text-transform: uppercase;
  text-align: center;
  padding: 60px 15px 30px 15px;
}
.boxes-wrapper .login-box .content {
  padding: 0px 15px 15px 15px;
}
.boxes-wrapper .login-box .content .input-group:first-child {
  margin-bottom: 6px;
}
.boxes-wrapper .login-box .content .input-group:last-child {
  margin-top: 25px;
}
.boxes-wrapper .login-box .content .input-group label {
  display: block;
  width: 100%;
  padding: 6px 0px 6px 0px;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.boxes-wrapper .login-box .content .input-group input {
  display: block;
  width: 100%;
  height: 37px;
  font-size: 14px;
  font-width: 400;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 37px;
  outline: 0;
  border: none;
  color: #555555;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  /* Safari and Chrome */
  -moz-appearance: none;
  /* Firefox */
  appearance: none;
  transition: all 0.3s;
}
.boxes-wrapper .login-box .content .input-group input[type="submit"] {
  background: #3976A6;
  color: white;
  text-transform: uppercase;
  cursor: pointer;
}
.boxes-wrapper .login-box .content .input-group input[type="submit"]:hover {
  background: #326993;
}
.boxes-wrapper .login-box .content .input-group input[type="submit"]:active {
  background: #2c5b80;
}
.boxes-wrapper .login-box .content .input-group input::-webkit-input-placeholder {
  /* WebKit browsers */
  font-family: inherit;
  font-style: normal;
  font-weight: normal;
  color: #A7A7A7;
}
.boxes-wrapper .login-box .content .input-group input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  color: #A7A7A7;
  opacity: 1;
}
.boxes-wrapper .login-box .content .input-group input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  color: #A7A7A7;
  opacity: 1;
}
.boxes-wrapper .login-box .content .input-group input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  color: #A7A7A7;
}
.boxes-wrapper .login-box .content .input-group input:required {
  box-shadow: none;
}
.boxes-wrapper .login-box .content .input-group input:required:focus {
  border: 0px;
  outline: none;
}
.boxes-wrapper .login-box .content .input-group input:required:hover {
  opacity: 1;
}
.boxes-wrapper .login-box .footer-login,
.boxes-wrapper .login-box .footer-password {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.boxes-wrapper .login-box .footer-login .question,
.boxes-wrapper .login-box .footer-password .question {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  font-size: 12px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s;
  width: 100%;
  z-index: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.boxes-wrapper .login-box .footer-login .button,
.boxes-wrapper .login-box .footer-password .button {
  position: relative;
  cursor: pointer;
  font-size: 16px;
  font-weight: 100;
  padding: 12px;
  text-align: center;
  text-transform: uppercase;
  background: #3976A6;
  transition: all 0.3s;
  transform: scale(0, 0);
  z-index: 1;
}
.boxes-wrapper .login-box .footer-login .button:hover,
.boxes-wrapper .login-box .footer-password .button:hover {
  background: #326993;
}
.boxes-wrapper .login-box .footer-login .button:active,
.boxes-wrapper .login-box .footer-password .button:active {
  background: #2c5b80;
}
.boxes-wrapper .login-box .footer-login:hover .question,
.boxes-wrapper .login-box .footer-password:hover .question {
  transform: scale(0, 0);
}
.boxes-wrapper .login-box .footer-login:hover .button,
.boxes-wrapper .login-box .footer-password:hover .button {
  transform: scale(1, 1);
}
.boxes-wrapper .login-box .footer-password {
  display: none;
}
.boxes-wrapper .login-box.password-reset {
  margin-top: -160px;
  height: 320px;
  transform: rotateZ(720deg);
}
.boxes-wrapper .login-box.password-reset.loading {
  transform: rotateZ(720deg) rotate3d(1, 0, 0, 90deg);
}
.boxes-wrapper .login-box.password-reset .password-group {
  display: none;
}
.boxes-wrapper .login-box.password-reset .footer-login {
  display: none;
}
.boxes-wrapper .login-box.password-reset .footer-password {
  display: block;
}
JS
(function(){
  
  // retrieve needed boxes and elements
  var wrapper         = document.getElementById('boxes-wrapper');
  var loginBox        = wrapper.querySelector('.login-box');
  var loadingBox      = wrapper.querySelector('.loading-box');
  var loadingBoxText  = loadingBox.querySelector('.inner-cell');
  var errorBox        = wrapper.querySelector('.error-box');
  var labelHeader     = loginBox.querySelector('.header span');
  var inputEmail      = loginBox.querySelector('input[type="email"]');
  var inputPassword   = loginBox.querySelector('input[type="password"]');
  var inputSubmit     = loginBox.querySelector('input[type="submit"]');
  var buttonPassword  = loginBox.querySelector('.request-password');
  var buttonLogin     = loginBox.querySelector('.back-login');
  var passwordGroup   = loginBox.querySelector('.password-group')
      
  // setup needed variables
  var active    = false;
  var startTime = null;
  var response  = null;
  var error     = null;
  
  var isRequestPassword = false;
      
  // setup needed functions
  function addClass(elm, name)
  {
    elm.className += ' ' + name;
  }
  
  function removeClass(elm, name)
  {
    elm.className = elm.className.replace(name, '').trim();
  }
  
  function hasClass(elm, name)
  {
    return (elm.className.search(name) !== -1);
  }
  
  function startLogin()
  {
    if  (active === true)
      return;
    
    active = true;
    startTime = new Date();
    response = null;
    error = null;
    
    // hide login box
    addClass(loginBox, 'loading');
    
    // waite for hidden login box and show loading view
    setTimeout(function(){
      addClass(loadingBox, 'in-mid');
      
      // waiting until request finished or finish
      
    }, 300);
    
    request(inputEmail.value, inputPassword.value);
  }
  
  function request(email, password) {
    var result = (email == 'max@example.com' && password == '12345678');
    setTimeout(function(){
      finished(null, result);
    }, 2000);
  }
  
  function finished(err, resp)
  {
    error     = err;
    response  = resp;
    
    // remove loading view and show login
    addClass(loadingBox, 'out-right');
    setTimeout(function() {      
      
      // go back to origin state
      removeClass(loadingBox, 'in-mid');
      removeClass(loadingBox, 'out-right');
      removeClass(loginBox, 'loading');
      removeClass(loginBox, 'password-reset');
      isRequestPassword = false;
      
      active = false;
      
    }, 300);
    
  }
  
  
  // initialize onclick event
  inputSubmit.addEventListener('click', function(e){
    e.preventDefault();
    startLogin();
    return false;
  });
  
  buttonPassword.addEventListener('click', function(e){
    addClass(loginBox, 'password-reset');
    inputSubmit.value = 'Reset Password';
    isRequestPassword = true;
  });
  
  buttonLogin.addEventListener('click', function(e){
    removeClass(loginBox, 'password-reset');
    inputSubmit.value = 'Login';
    isRequestPassword = false;
  });
  
})();
Host Instantly Drag and Drop Website Builder

 

Description

Updated login form for more user interaction and more feeling on using the world wide web.
Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID