<section>
  <div class="container">
    <p>Enter your <strong>password</strong></p>
    <fieldset class="form-group pw-fancy">
      <label>
        <div class="pw-fancy--asterisks"></div>
        <input type="password">
      </label>
    </fieldset>
    <button type="button" class="show-error">Toggle error status</button>
  </div>
</section>

html{
  font-size: 10px;
}
body{
  background: #333;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 100;
}
p{
  color: #fff;
  font-size: 3em;
  text-align: center;
  strong{
    font-weight:400;
  }
}
button{
  display: block;
  margin: 50px auto 20px;
  padding: 10px 20px;
  font-size: 2em;
  border-radius: 2px;
  border: none;
  background: #fff;
}
section{
  padding-top:100px;
}
@keyframes showAsterisk{
  0%{
    transform: translate(0,40px);
  }
  100%{
    transform: translate(0px,0px);
  }
}
@keyframes flicker{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes shake{
  0%, 100%{
    transform: translate(0px,0px);
  }
  14%{
    transform: translate(-10px,0px);
  }
  28%{
    transform: translate(10px,0px);
  }
  42%{
    transform: translate(-10px,0px);
  }
  56%{
    transform: translate(10px,0px);
  }
  70%{
    transform: translate(-10px,0px);
  }
  84%{
    transform: translate(10px,0px);
  }
}
.pw-fancy{
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  border-bottom: 4px solid white;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 5px;
  label{
    position: relative;
    width: 100%;
  }
  &.warning{
    animation: shake 500ms forwards ease-out;
    border-color: #EF9A9A;
    .pw-fancy--asterisks i{
      color: #F44336;
    }
    &:before,
    &:after{
      background-color: #EF9A9A;
    }
  }
  input{
    background: transparent;
    border:none;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    display: block;
    font-size:3em;
    opacity: 0;
    z-index: 200;
  }
  &:before,
  &:after{
    content:"";
    position: absolute;
    bottom: 0;
    display:block;
    width: 4px;
    height: 15px;
    background: #fff;
  }
  &:after{
    left: 0;
  }
  &:before{
    right: 0;
  }
}
.pw-fancy--asterisks{
  position: relative;
  z-index: 100;
  height: 4em;
  padding-left: 12px;
  padding-right: 12px;
  overflow: hidden;
  display:flex;
  transition: 250ms ease-out all;
  &:empty{
    &:before{
      content: "";
      border-left: 2px solid white;
      animation: flicker 500ms infinite alternate ease-out;
    }
  }
  &.pw-long{
    font-size:0.5em;
  }
  &.pw-longer{
    font-size:0.25em;
  }
  i{
    margin-right: 0.25em;
    display:block;
    color: #fff;
    font-size:3em;
    animation: showAsterisk 250ms forwards cubic-bezier(0, 0.75, 0.75, 1.25);
  }
}

// there's got to be a better way to do this... angular databinding? React? need research...

$('input').on('input', function(){
  var pwf = $('.pw-fancy--asterisks'),
      pwLength = $(this).val().length;
  $('.pw-fancy').removeClass('warning');
  // check pw length
  if( pwLength > pwf.children().length){
    // add an asterisk if pw length has increased
    pwf.append('<i class="fa fa-asterisk"></i>');
  } else if (pwLength < pwf.children().length){
    // remove the last asterisk until length is same or lower
    while(pwLength < pwf.children().length){
      // todo, remove animation? 
      pwf.children().last().remove();
    }
  }
  // some responsive styling, there's probably a better way to do this :P
  if(pwLength > 8){
    pwf.addClass('pw-long');
  } else {
    pwf.removeClass('pw-long');
  }
  if(pwLength > 16){
    pwf.addClass('pw-longer');
  } else {
    pwf.removeClass('pw-longer');
  }
});

$('.show-error').click(function(){
  $('.pw-fancy').toggleClass('warning');
});