<div class="container">
  <div class="formBg">
				<div class="form-field" >
					<svg class="svgFormBg initial loader" xmlns="http://www.w3.org/2000/svg" viewBox="-1 0 500 40" width="500" height="41" id="svg" >
						<g>
							<circle cx="20" cy="20" r="20" class="ls-circle" id="ls-circle"  transform="rotate(90 20 20)"/>
							<line x1="20" y1="40" x2="350" y2="40" class="ls-line" id="ls-line"/>
							<circle cx="350" cy="20" r="20" class="rs-circle" id="rs-circle" transform="rotate(90 350 20)"/>
							<path fill="none" stroke="#000000" stroke-linecap="round" class="rs-tick" stroke-miterlimit="10" d="M28.656,13.526L17.005,25.178l-4.886-4.886
			l-9.73-9.78C5.769,4.253,12.388,0,20,0c11.045,0,20,8.954,20,19.999C40,31.046,31.045,40,20,40"/>
							<g class="rs-error-g">
								<path fill="none" stroke-miterlimit="10" d="M19.75,24.384V0H20c11.045,0,20,8.954,20,19.999
			C40,31.046,31.045,40,20,40" class="rs-close"/>
								<path fill="none" stroke-miterlimit="10" d="M19.75,29.875c-0.268,0-0.5,0.224-0.5,0.5
			c0,0.268,0.224,0.5,0.5,0.5c0.268,0,0.5-0.224,0.5-0.5C20.25,30.107,20.026,29.875,19.75,29.875z" class="rs-close-dot"/>
							</g>
						</g>
					</svg>
					<div class="inputBdr">
						<input type="text" id="inputElm" class="inputElm" placeholder="Name" data-text="Enter your name"/>
					</div>
					<span class="ls-content user"></span>
					
				</div>
				
				<div class="form-field" >
					<svg class="svgFormBg initial loader" xmlns="http://www.w3.org/2000/svg" viewBox="-1 0 500 40" width="500" height="41" id="svg" >
						<g>
							<circle cx="20" cy="20" r="20" class="ls-circle" id="ls-circle"  transform="rotate(90 20 20)"/>
							<line x1="20" y1="40" x2="350" y2="40" class="ls-line" id="ls-line"/>
							<circle cx="350" cy="20" r="20" class="rs-circle" id="rs-circle" transform="rotate(90 350 20)"/>
							<path fill="none" stroke="#000000" stroke-linecap="round" class="rs-tick" stroke-miterlimit="10" d="M28.656,13.526L17.005,25.178l-4.886-4.886
			l-9.73-9.78C5.769,4.253,12.388,0,20,0c11.045,0,20,8.954,20,19.999C40,31.046,31.045,40,20,40"/>
							<g class="rs-error-g">
								<path fill="none" stroke-miterlimit="10" d="M19.75,24.384V0H20c11.045,0,20,8.954,20,19.999
			C40,31.046,31.045,40,20,40" class="rs-close"/>
								<path fill="none" stroke-miterlimit="10" d="M19.75,29.875c-0.268,0-0.5,0.224-0.5,0.5
			c0,0.268,0.224,0.5,0.5,0.5c0.268,0,0.5-0.224,0.5-0.5C20.25,30.107,20.026,29.875,19.75,29.875z" class="rs-close-dot"/>
							</g>
						</g>
					</svg>
					<div class="inputBdr">
						<input type="text" id="inputElm" class="inputElm"  placeholder="E-Mail" data-text="Enter your mail id"/>
					</div>
					<span class="ls-content mail"></span>
					
				</div>
				
				<div class="form-field" >
					<svg class="svgFormBg initial loader" xmlns="http://www.w3.org/2000/svg" viewBox="-1 0 500 40" width="500" height="41" id="svg" >
						<g>
							<circle cx="20" cy="20" r="20" class="ls-circle" id="ls-circle"  transform="rotate(90 20 20)"/>
							<line x1="20" y1="40" x2="350" y2="40" class="ls-line" id="ls-line"/>
							<circle cx="350" cy="20" r="20" class="rs-circle" id="rs-circle" transform="rotate(90 350 20)"/>
							<path fill="none" stroke="#000000" stroke-linecap="round" class="rs-tick" stroke-miterlimit="10" d="M28.656,13.526L17.005,25.178l-4.886-4.886
			l-9.73-9.78C5.769,4.253,12.388,0,20,0c11.045,0,20,8.954,20,19.999C40,31.046,31.045,40,20,40"/>
							<g class="rs-error-g">
								<path fill="none" stroke-miterlimit="10" d="M19.75,24.384V0H20c11.045,0,20,8.954,20,19.999
			C40,31.046,31.045,40,20,40" class="rs-close"/>
								<path fill="none" stroke-miterlimit="10" d="M19.75,29.875c-0.268,0-0.5,0.224-0.5,0.5
			c0,0.268,0.224,0.5,0.5,0.5c0.268,0,0.5-0.224,0.5-0.5C20.25,30.107,20.026,29.875,19.75,29.875z" class="rs-close-dot"/>
							</g>
						</g>
					</svg>
					<div class="inputBdr">
						<input type="text" id="inputElm" class="inputElm" placeholder="Password" data-text="Enter your password"/>
					</div>
					<span class="ls-content password"></span>
					
				</div>
				<div>
					<input type="button" class="submitBtn" value="Submit"/>
				</div>
<div class="followBtn"><a href="https://twitter.com/dropinksblog?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Follow @dropinksblog</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
			</div>
    </div>
</div>





.container{ margin: auto; width: 430px;margin-top: 20px}
		  .formBg{background: #fff; padding: 5px 30px 30px 30px; border-radius: 3px; box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.2);}
.followBtn{margin-top: 20px; text-align: center;}


.form-field{position: relative; margin: 30px 0;}
.svgFormBg{position: absolute; left: 0; top: 0; transform-origin: center;}
.inputElm{width: 280px; position: relative; z-index: 1; color: #000; top: 0px; height: 39px; border: none; background: transparent; font-size: 15px; vertical-align: top;}
.inputElm:focus{outline: none;}
.ls-content{width: 40px; height: 40px; display: inline-block; }
.rs-content{width: 40px; height: 40px; display: inline-block; line-height: 40px;  text-align: center; font-size: 15px; vertical-align: top;  }
.user{background: url('http://demos.dropinks.com/form-interaction-svg/user.svg') no-repeat center; background-size: 34px;}
.mail{background: url('http://demos.dropinks.com/form-interaction-svg/mail.svg') no-repeat center; background-size: 16px;}
.password{background: url('http://demos.dropinks.com/form-interaction-svg/pswd.svg') no-repeat center; background-size: 17px;}

.inputBdr{position: absolute; top: 0; left: 50px;}
.inputBdr:after{content:""; position: absolute; left: 0px; bottom: 0; width: 100%; height: 2px; background: rgba(68, 134, 237, 0.3);}
.ls-circle, .ls-line, .rs-circle, .rs-tick, .rs-close, .rs-close-dot{stroke-width: 2px; stroke: #4486ed; fill: none;}
.ls-circle, .ls-line{ transition: 0.5s all ease;}
.rs-tick{stroke: #27ae60;}
.rs-tick, .rs-error-g{transform: translateX(330px); }
.rs-error-g path{stroke: #e74c3c}

.ls-circle{stroke-dasharray: 126; stroke-dashoffset: 0;}
.ls-line{stroke-dasharray: 330; stroke-dashoffset: 330;}
.rs-circle, .rs-arc{stroke-dasharray: 126; stroke-dashoffset: -126; }
.rs-tick{stroke-dasharray: 122; stroke-dashoffset: 122;}
.rs-close{stroke-dasharray: 87.5; stroke-dashoffset: 87.5;}
.rs-close-dot{opacity: 0; }

.focus .ls-circle{stroke-dashoffset: 126;}
.focus .ls-line{stroke-dashoffset: -30;}
.focus .rs-circle{stroke-dashoffset: -126;}

.validate .ls-circle{stroke-dashoffset: 126;}
.validate .ls-line{stroke-dashoffset: -330; transition: 0.1s all 0s ease;}
.validate .rs-circle{animation: rotator 1s linear 0s infinite forwards; stroke-linecap: round; stroke-dasharray: 0, 126; stroke-dashoffset: 0;}
@keyframes rotator {
  0% {stroke-dasharray: 10, 116; stroke-dashoffset: 10;}
  50% {stroke-dasharray: 70, 53; stroke-dashoffset: 126;}
  100% {stroke-dasharray: 10, 116; stroke-dashoffset: 263;}

}

.success .ls-circle{stroke-dashoffset: 126;}
.success .ls-line{stroke-dashoffset: -330;}
.success .rs-circle{stroke-dashoffset: -126;}
.success .rs-tick{animation: tick 0.5s linear 0s 1 forwards; stroke-linecap: round; }
.success .rs-close-g{display: none; }
@keyframes tick {
  0% {stroke-dasharray: 0, 122; stroke-dashoffset: 0;}
  100% {stroke-dasharray: 25, 97; stroke-dashoffset: 122;}

}
.error .ls-circle{stroke-dashoffset: 126;}
.error .ls-line{stroke-dashoffset: -330;}
.error .rs-circle{stroke-dashoffset: -126;}
.error .rs-tick{display: none; }
.error .rs-close{animation: close 0.5s linear 0s 1 forwards; stroke-linecap: round; }
.error .rs-close-dot{opacity: 1;transition: 0.3s all 0.3s ease; }
@keyframes close {
  0% {stroke-dasharray: 0, 87.5; stroke-dashoffset: 0;}
  100% {stroke-dasharray: 11, 76; stroke-dashoffset: 86;}

}

.focus.error .ls-line{stroke-dashoffset: -30; transition-delay: 0.2s;}
.focus.error .rs-close{animation: closeFocus 0.3s linear 0s 1 forwards; stroke-linecap: round; }
.focus.error .rs-close-dot{opacity: 0; }
@keyframes closeFocus {
  0% {stroke-dasharray: 11, 76;}
  50% {stroke-dasharray: 87.5, 0; }  
  100% {stroke-dasharray: 87.5;}  
}

.focus.success .ls-line{stroke-dashoffset: -30; transition-delay: 0.2s;}
.focus.success .rs-tick{animation: closeSucFocus 0.3s linear 0s 1 forwards; stroke-linecap: round; }
@keyframes closeSucFocus {
  0% {stroke-dasharray: 25, 97; }
  100% {stroke-dasharray: 122; }  

}
		  
.submitBtn{border: 2px solid #4486ed; color: #4486ed; font-size: 16px; background: #fff; margin-top: 5px; transition:  0.5s all ease; padding: 10px 20px; width: 100%; cursor: pointer; border-radius: 30px;}
.submitBtn:hover{border: 2px solid #fff; color: #fff; background: #4486ed;}
.submitBtn:focus{outline: none;}
		  
.error + .inputBdr input::-webkit-input-placeholder{color:#e74c3c; opacity: 0.7;}
.error input::-moz-placeholder{color:#e74c3c;  opacity: 0.7;}
.error input:-ms-input-placeholder{color:#e74c3c;  opacity: 0.7;}







html, body{
  width: 100%; 
  height: 100%; 
  font-family: 'Roboto', sans-serif;
}
body{
  margin: 0;
  background: #4486ed;
}

.projHeader{position: static; left: 8%; top: 50%; transform: translateY(-50%);    padding-right: 15px;}
.primaryText{font-weight: 300; font-size: 50px; text-shadow: 2px 2px 1px rgba(0,0,0,0.3); color: #fff;}
.secondaryText{font-weight: 300; text-align: right; font-size: 25px;}
.createdBy{font-weight: 300;color: #fff; text-align: right; font-size: 17px; margin-top :10px;}
.createdBy a{color: #fff; text-decoration: none; border-bottom: 1px solid #fff;}
.footer{position: absolute; right: 8%; top: 50%; transform: translateY(-50%); border-left: 1px solid rgba(0,0,0,0.5);padding-left: 15px;}
.footer a.social{display: inline-block; font-size: 17px; padding: 7px 0; color: #000; text-decoration: none; }


@media only screen and (max-width: 1200px) {
  .projHeader{position: static; transform: translate(0);}
.primaryText{font-weight: 300; font-size: 30px;text-align: center; margin-top: 10px;}
.secondaryText{font-weight: 300; text-align: center; font-size: 20px;}
  .createdBy{font-weight: 300; text-align: center; font-size: 17px; margin-top :5px;}
.createdBy a{color: #000; text-decoration: none; border-bottom: 1px solid #000;}

.footer{position: fixed; bottom: 0; right: auto; top: auto; left: 0; border-top: 1px solid rgba(0,0,0,0.5); width: 100%; transform: translate(0); border: none; padding: 0; text-align: center; border-top: 1px solid #bfc7e4;}
  .footer div{display: inline-block;}
.footer a.social{display: inline-block; font-size: 17px; padding: 7px 0; color: #fff; text-decoration: none; margin: 0px 20px;}
}
var body, lsLine, lsCircle, svg, inputElm;
function focusElement(inputElm){
  var field = inputElm.closest(".form-field");
  var lsLine = field.getElementsByClassName("ls-line")[0];
  var lsCircle = field.getElementsByClassName("ls-circle")[0];
  var svg = field.getElementsByTagName("svg")[0];

  if(svg.classList.contains("initial") || svg.classList.contains("validate") || svg.classList.contains("error") || svg.classList.contains("success")){
    svg.classList.remove("initial");
    svg.classList.remove("validate");
    svg.classList.add("focus");
    if(svg.classList.contains("error")){
      function transEnd(){
        svg.classList.remove("error")
        lsLine.removeEventListener("transitionend", transEnd)	
      }
      lsLine.addEventListener("transitionend", transEnd, false);
    }
    if(svg.classList.contains("success")){
      function transEnd(){
        svg.classList.remove("success")
        lsLine.removeEventListener("transitionend", transEnd)	
      }
      lsLine.addEventListener("transitionend", transEnd, false);
    }
  }
}
function blurElement(inputElm){
  var field = inputElm.closest(".form-field");
  var lsLine = field.getElementsByClassName("ls-line")[0];
  var lsCircle = field.getElementsByClassName("ls-circle")[0];
  var svg = field.getElementsByTagName("svg")[0];

  if(svg.classList.contains("focus")){
    svg.classList.remove("focus");
    svg.classList.add("validate");
    setTimeout(function(){
      svg.classList.remove("validate");
      if(inputElm.value.length > 0){
        svg.classList.add("success");
      }else{
        inputElm.setAttribute("placeholder", inputElm.getAttribute("data-text"));
        svg.classList.add("error");
      }
    },1900);
  }
}
function bindClick(){
  var formField = document.getElementsByClassName("form-field");
  for(var i=0; i<formField.length;i++){
    var inputElm = formField[i].getElementsByTagName("input")[0];
    inputElm.addEventListener("focus", function(){focusElement(this);}, false);
    inputElm.addEventListener("blur", function(){blurElement(this);}, false);
  }
}

bindClick();

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:300,400

External JavaScript

This Pen doesn't use any external JavaScript resources.