LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Lato');

button {
  border: 0;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

html, body, .login {
  font-family: 'Lato', sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 15px;
}

.link {
  color: #1a2980;
  text-decoration: underline;
  cursor: pointer;
}

.link:hover,
.link:focus {
  color: blue;
}

.link--alt {
  color: #fff;
}

.link--alt:hover,
.link--alt:focus {
  color: #ddf;
}

.login__gradient {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #bfd255;
  background: -webkit-linear-gradient(315deg, #fa354c 0%, #1a2980 100%);
  background: linear-gradient(135deg, #fa354c 0%, #1a2980 100%);
  z-index: -1;
}

.login__container {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
}

.login__form {
  overflow: hidden;
  position: relative;
  background: #fff;
  padding: 55px 40px 10px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3),
              5px 5px 0 rgba(0, 0, 0, 0.1);
}

.login__form--alert {
  -webkit-animation: shake 150ms linear 3;
          animation: shake 150ms linear 3;
}

.message {
  max-height: 0;
  line-height: 1.5;
  letter-spacing: 0.1px;
  overflow: hidden;
  -webkit-transition: max-height 250ms linear;
  transition: max-height 250ms linear;
}

.message--alert {
  max-height: 300px;
  background: #fa354c;
  color: white;
  -webkit-animation: blink 250ms linear 2;
          animation: blink 250ms linear 2;
}

.message__link {
  text-decoration: underline;
  cursor: pointer;
}

.login__message {
  padding: 10px;
  margin: -55px 0 20px -40px;
  width: calc(100% + 80px);
  box-sizing: border-box;
}

.login__title {
  font-family: 'Droid Serif', serif;
  font-style: italic;
  padding: 15px;
  position: absolute;
  margin-top: 0;
  margin-bottom: 20px;
  color: white;
}

.login__fieldset {
  margin-bottom: 30px;
}

.login__fieldset--center {
  text-align: center;
}

.login__info {
  text-align: center;
  margin-bottom: 10px;
  color: grey;
}

.login__social {
  cursor: pointer;
}

.icon {
  padding: 5px;
}

.icon--medium {
  width: 45px;
}

.icon--google {
  outline: 1px solid lightgrey;
  outline-offset: -5px;
}

.login__input {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  padding: 10px;
  margin-bottom: 30px;
  width: 100%;
  box-sizing: border-box;
  -webkit-transition: border 250ms ease-in-out;
  transition: border 250ms ease-in-out;
}

.login__input--error {
  border: 1px solid #fa354c;
}

.input__extrainfo {
  color: grey;
  font-size: 0.8rem;
}

.input__message {
  font-size: 0.8rem;
}

.input__message--error {
  color: #fa354c;
}

.login__label {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  position: relative;
  display: block;
  margin-top: -1rem;
  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}

.login__button {
  font-family: 'Lato', sans-serif;
  border: transparent;
  margin-top: -5px;
  font-size: 1rem;
  background: #1a2980;
  color: white;
  padding: 15px;
  width: 100%;
  cursor: pointer;
  margin-bottom: 25px;
}

.login__footnote {
  text-align: center;
}

.statusbar {
  width: 100%;
  height: 5px;
  box-sizing: border-box;
  position: absolute;
  max-height: 0;
  overflow: hidden;
  left: 0;
  bottom: 0;
  -webkit-transition: max-height 250ms linear;
  transition: max-height 250ms linear;
}

.statusbar--loading {
  max-height: 5px;
  background: -webkit-linear-gradient(left, #4cd964, #007aff, #ff2d55, #5856d6, #4cd964);
  background: linear-gradient(to right, #4cd964, #007aff, #ff2d55, #5856d6, #4cd964);
  background-size: 300% 100%;
  -webkit-animation: loading 2s linear infinite;
          animation: loading 2s linear infinite;
}

.statusbar--alert {
  max-height: 5px;
  background: #fa354c;
  -webkit-animation: blink 250ms linear 2;
          animation: blink 250ms linear 2;
}

@-webkit-keyframes loading {
  0%{background-position: 0% 100%}
  100%{background-position: 300% 100%}
}

@keyframes loading {
  0%{background-position: 0% 100%}
  100%{background-position: 300% 100%}
}

@-webkit-keyframes blink {
  50%{background: transparent}
}

@keyframes blink {
  50%{background: transparent}
}

@-webkit-keyframes shake {
  25%{-webkit-transform: translateX(-5%);transform: translateX(-5%)}
  50%{-webkit-transform: translateX(5%);transform: translateX(5%)}
}

@keyframes shake {
  25%{-webkit-transform: translateX(-5%);transform: translateX(-5%)}
  50%{-webkit-transform: translateX(5%);transform: translateX(5%)}
}

.bounce {
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: #1a2980;
  border-radius: 50%;
  z-index: 1000;
  -webkit-transform: translate(-50%, -50%) scale(1, 1);
          transform: translate(-50%, -50%) scale(1, 1);
  -webkit-animation: bounce 850ms linear 1 forwards;
          animation: bounce 850ms linear 1 forwards;
}

.bouce--pre {
  pointer-events: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-color: #fff;
  -webkit-animation: fade 250ms linear 1 forwards;
          animation: fade 250ms linear 1 forwards;
}

@-webkit-keyframes bounce {
  100%{
    background-color: #fff;
    -webkit-transform: translate(-50%, -50%) scale(500, 500);
            transform: translate(-50%, -50%) scale(500, 500);
  }
}

@keyframes bounce {
  100%{
    background-color: #fff;
    -webkit-transform: translate(-50%, -50%) scale(500, 500);
            transform: translate(-50%, -50%) scale(500, 500);
  }
}

@-webkit-keyframes fade {
  100%{
    opacity: 0;
  }
}

@keyframes fade {
  100%{
    opacity: 0;
  }
}
JS
const form = document.querySelector('.login__form');
const loginButton = document.querySelector('.js-submit');
const statusbar = document.querySelector('.statusbar');
const message = document.querySelector('.message');
const emailInput = document.querySelector('#email');
const passwordInput = document.querySelector('#password');
const emailMessage = document.querySelector('#emailmessage');
const passwordMessage = document.querySelector('#passwordmessage');
const registerButton = document.querySelector('.js-register');
const preBounce = document.querySelector('.bouce--pre');

preBounce.addEventListener('animationend', function(e) { e.target.style.display = 'none' })

loginButton.addEventListener('click', loginHandler);

function loginHandler(e) {
  e.preventDefault();
  statusbarClassHandler('loading');
  
  setTimeout(() => errorHandler(), 2000);
}

function errorHandler() {
  statusbarClassHandler('alert');
  form.addEventListener('animationend', writeMessageError);
  form.classList.add('login__form--alert');
  
  function writeMessageError() {
    form.removeEventListener('animationend', writeMessageError);
    
    message.innerHTML = `
      
  • or
  • Don’t have an account yet? Register here
`; messageClassHandler('alert'); emailMessage.innerHTML = `Please check your email address`; passwordMessage.innerHTML = `Please check your password`; emailMessage.classList.add('input__message--error'); passwordMessage.classList.add('input__message--error'); emailInput.classList.add('login__input--error'); passwordInput.classList.add('login__input--error'); } } function statusbarClassHandler(name) { statusbar.classList.remove('statusbar--loading'); statusbar.classList.remove('statusbar--alter'); statusbar.classList.add(`statusbar--${name}`); } function messageClassHandler(name) { message.classList.remove('message--alert'); message.classList.add(`message--${name}`); } registerButton.addEventListener('click', openHandler); function openHandler(e) { e.preventDefault(); const el = e.target; const bounce = document.createElement('div'); el.style.position = 'relative'; el.appendChild(bounce); bounce.classList.add('bounce'); bounce.addEventListener('animationend', function() { location.reload(true); }); }
Host Instantly Drag and Drop Website Builder

 

Description

Beautiful UI login form widget. User Interface handcrafted with love, html, css and javascript.
Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID