<label for="inp" class="inp">
<input type="password" id="inp" placeholder="Password" pattern=".{6,}" required>
<svg width="280px" height="18px" viewBox="0 0 280 18" class="border">
<path d="M0,12 L223.166144,12 C217.241379,12 217.899687,12 225.141066,12 C236.003135,12 241.9279,12 249.827586,12 C257.727273,12 264.639498,12 274.514107,12 C281.097179,12 281.755486,12 276.489028,12"></path>
</svg>
<svg width="14px" height="12px" viewBox="0 0 14 12" class="check">
<path d="M1 7 5.5 11 L13 1"></path>
</svg>
</label>
</form>
$primary = #0077FF
html, body
height: 100%
body
display: grid
font-family: Avenir
-webkit-text-size-adjust: 100%
-webkit-font-smoothing: antialiased
overflow: hidden
*
box-sizing: border-box
.inp
position: relative
margin: auto
width: 100%
max-width: 280px
height: 53px
.border
position: absolute
left: 0
bottom: 0
height: 18px
fill: none
path
stroke: #C8CCD4
stroke-width: 2
d
transition: all .2s ease
.check
position: absolute
top: 20px
right: 20px
fill: none
transform: translate(0,9px) scale(0)
transition: all .3s cubic-bezier(.5, .9, .25, 1.3)
transition-delay: .15s
path
stroke: $primary
stroke-width: 2
input
-webkit-appearance: none
width: 100%
border: 0
font-family: inherit
padding: 0
height: 48px
font-size: 16px
font-weight: 500
background: none
border-radius: 0
color: #223254
transition: all .15s ease
&:focus
outline: none
+ .border path
stroke: $primary
&:valid
+ .border
path
animation: elasticInput .8s ease forwards
+ .check
transform: translate(0,0) scale(1)
::placeholder
color: #9098A9
@keyframes elasticInput
33%
d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,1 253,1 C261,1 268,12 278,12 C284.666667,12 285.333333,12 280,12")
66%
d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,17 253,17 C261,17 268,12 278,12 C284.666667,12 285.333333,12 280,12")
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.