JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<section>
  <label for="test-input">
    Input maxlength(40) hint test
  </label>
  <div class="input-wrapper">
    <input type="text" placeholder="Type something in..." maxlength="40" value="Test my length">
  </div>
  <div class="input-bottom">
    <div class="input-progress"></div>
  </div>
</section>

CSS

body{
    font-family: sans-serif;
    font-size: 18px;
}

section{
  max-width: 360px;
  margin: 50px auto;
}

label{
  font-size: 13px;
  color: gray;
}

input{
  border: none;
  padding: 10px 0;
  font-size: 16px;
  width: 100%;
  outline: none;
}

.input-bottom,
.input-progress{
  height: 1px;
  background: #f2f3f0;
}

.input-progress{
  width: 0;
  background: #00b0ea;
  transition: 0.2s cubic-bezier(0, 0, 0, 0.99);
}

JavaScript

var input = document.querySelector('input');
var progress = document.querySelector('.input-progress');

function handleInputProgress(){
  var maxLength = parseInt(input.getAttribute('maxlength') || 0, 10),
      length = input.value.length,
      percentage = 100/maxLength * length;

  progress.style.width = percentage + '%';
}

input.addEventListener('keyup', handleInputProgress, false);

handleInputProgress();