空き状況を確認中スピナー付きユーザー名入力欄

<div class="d04-11-11-field">
          <label class="d04-11-11-label" for="d04-11-11-input">希望ユーザー名</label>
          <div class="d04-11-11-wrap">
            <input type="text" class="d04-11-11-input" id="d04-11-11-input" placeholder="4文字以上を入力">
            <span class="d04-11-11-status">
              <span class="d04-11-11-spinner"></span>
              <svg class="d04-11-11-ok" viewBox="0 0 24 24" aria-hidden="true"><polyline points="4.5 12.5 10 18 19.5 6.5" fill="none" stroke="#22b573" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
              <svg class="d04-11-11-ng" viewBox="0 0 24 24" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18" stroke="#e5484d" stroke-width="3" stroke-linecap="round"/><line x1="18" y1="6" x2="6" y2="18" stroke="#e5484d" stroke-width="3" stroke-linecap="round"/></svg>
            </span>
          </div>
          <p class="d04-11-11-msg">4文字以上入力すると空き状況を確認します</p>
        </div>

.d04-11-11-field{width:min(270px,100%)}
        .d04-11-11-label{display:block;margin-bottom:6px;font-size:13px;color:#555;font-weight:700}
        .d04-11-11-wrap{position:relative}
        .d04-11-11-input{width:100%;padding:12px 42px 12px 14px;font-size:14px;border:2px solid #d5d9e0;border-radius:8px;outline:none;background:#fff;transition:border-color .25s}
        .d04-11-11-input:focus{border-color:#4a6cf7}
        .d04-11-11-status{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;align-items:center;justify-content:center}
        .d04-11-11-spinner{display:none;width:16px;height:16px;border:2px solid #d5d9e0;border-top-color:#4a6cf7;border-radius:50%;animation:d04-11-11-spin .6s linear infinite}
        .d04-11-11-ok,.d04-11-11-ng{display:none;width:20px;height:20px}
        .d04-11-11-field.is-checking .d04-11-11-spinner{display:block}
        .d04-11-11-field.is-ok .d04-11-11-ok{display:block}
        .d04-11-11-field.is-ng .d04-11-11-ng{display:block}
        .d04-11-11-msg{margin:6px 0 0;font-size:11.5px;color:#8a93a3}
        .d04-11-11-field.is-ok .d04-11-11-msg{color:#22b573;font-weight:700}
        .d04-11-11-field.is-ng .d04-11-11-msg{color:#e5484d;font-weight:700}
        @keyframes d04-11-11-spin{to{transform:rotate(360deg)}}

(function(){
        var field=document.querySelector('.d04-11-11-field');
        if(!field)return;
        var input=field.querySelector('.d04-11-11-input');
        var msg=field.querySelector('.d04-11-11-msg');
        var timer=null;
        input.addEventListener('input',function(){
          field.classList.remove('is-ok','is-ng','is-checking');
          if(timer)clearTimeout(timer);
          var val=input.value.trim();
          if(val.length<4){
            msg.textContent='4文字以上入力すると空き状況を確認します';
            return;
          }
          field.classList.add('is-checking');
          msg.textContent='空き状況を確認しています…';
          timer=setTimeout(function(){
            field.classList.remove('is-checking');
            var taken=/admin|test|guest/i.test(val);
            if(taken){
              field.classList.add('is-ng');
              msg.textContent='そのユーザー名は既に使われています';
            }else{
              field.classList.add('is-ok');
              msg.textContent='このユーザー名は利用できます';
            }
          },700);
        });
      })();