HOME  >   HTML5 CANVAS  >   CSS3 ANIMATION  >   RectJS Based Text box Word Limit Animation
RectJS Based Text box Word Limit Animation
BY Daniel7 Jan,2021

Today we want to introduce you to a more practical web page text box tool, the text box is characterized by the input of text can be real-time text word limit, not only in the lower right corner to show the number of words remaining, but also in the text box below the color of the progress bar tips. This text box word limit animation is based on RectJS and animate.css animation library, which is very easy to implement after referencing the script library.


RectJS Based Text box Word Limit Animation
HTML Body Code
function TextLoader() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, TextLoader);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TextLoader.__proto__ || Object.getPrototypeOf(TextLoader)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      lettersCount: 0,
      inputValue: '',
      countLimit: _this.props.limit,
      loaderCompleted: 0,
      errorLimit: false
    }, _this.handleType = function (e) {
      var val = e.target.value;
      if (val.length <= _this.state.countLimit) {
        _this.setState(function (prev) {
          return {
            lettersCount: val.length,
            inputValue: val,
            errorLimit: false,
            loaderCompleted: Math.floor(val.length / prev.countLimit * 100, 2)
      } else {
        _this.setState(function (prev) {
          return {
            inputValue: prev.inputValue,
            errorLimit: true
    }, _temp), _possibleConstructorReturn(_this, _ret);
Css Code
h1 {
  font-size: 27px;
  margin-bottom: 10px;
  color: #272727;
.container {
  background: #76daff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: fixed;
/* loader Styles started*/
.loader-wrapper {
  display: inline-block;
  margin: 10px;
  width: 550px;
.input-wrapper {
  border-width: 5px;
  border-style: solid;
  border-color: #9be4ff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: block;
  position: relative;