Анимация индикатора загрузки на кнопке с помощью Vanilla Javascript

Привет 🙋🏾♂️,

В сегодняшнем посте мы сделаем индикатор загрузки на кнопке отправки. Это распространенная функция в настоящее время, чтобы отобразить/скрыть спиннер на кнопке, пока приложение находится в занятом состоянии. Я сделал это на очень базовом уровне, то есть без сложного кода. Существует несколько способов сделать это. Пожалуйста, не стесняйтесь поделиться ими с нами 😊.

Базовые навыки в HTML, CSS и Javascript будут в самый раз, чтобы следовать этому посту.

Для кодирования нам понадобится всего 3 файла;

  • index.html
  • style.css
  • main.js

Начните с создания кодовой таблицы html:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Loading Indicator</title>
</head>
<body>

</body>
</html>
Войдите в полноэкранный режим Выход из полноэкранного режима

Далее мы вносим наши файлы css и javascript в index.html;

index.html
    <link rel="stylesheet" href="style.css" />
    <script src="main.js" defer></script>
Войти в полноэкранный режим Выйти из полноэкранного режима

Чтобы получить представление об отправке данных, мы создадим фиктивную форму и добавим два элемента ввода и кнопку отправки, хотя мы не будем отправлять никаких данных.

index.html
    <form class="sampleForm">
      <h1>Login form</h1>
      <div>
        <input type="text" placeholder="Enter email" />
      </div>
      <div>
        <input type="password" placeholder="Enter password" />
      </div>
      <button id="btnSubmit">
        <span id="btnSubmitText">Submit</span>
      </button>
    </form>
Вход в полноэкранный режим Выход из полноэкранного режима

Из кода, который мы только что добавили, у нас есть;

  • форма с идентификатором sampleForm
  • 2 элемента ввода (текст и пароль, оба с заполнителями)
  • кнопка отправки с дочерним элементом span с идентификатором btnSubmitText.

На данном этапе мы будем использовать иконку спиннера от fontawesome. Мы прилагаем cdn, но вы также можете скачать комплект и установить его вручную, если вы знакомы с этим процессом.

index.html
<!-- Fontawesome cdn -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
   integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь мы добавим два дочерних элемента в buttom: значок спиннера fontawesome и элемент span, как показано ниже;

index.html
<button id="btnSubmit">
  <span id="btnSubmitText">Submit</span>
  <i class="fa-solid fa-spinner fa-spin"></i>
</button>
Войти в полноэкранный режим Выйти из полноэкранного режима

Класс fa-spinner добавляет иконку спиннера, а чтобы анимировать иконку, мы добавляем класс fa-spin. Существуют и другие анимации, такие как beat, fade, bounce, shake и т.д., все они находятся в fontawesome animation.

Далее мы добавим некоторые стили к нашей форме.

style.css
.sampleForm {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
input {
  padding: 10px;
  margin: 5px;
  width: 250px;
}
button {
  background-color: orange;
  color: white;
  border: none;
  font-size: 20px;
  padding: 10px;
  width: 150px;
  height: 50px;
  cursor: pointer;
}
.fa-spinner {
  display: none;
}

Вход в полноэкранный режим Выход из полноэкранного режима

Кнопка имеет фиксированную ширину и высоту. Это нужно для того, чтобы сохранить одинаковый размер кнопки при переключении значка и текста. Изначально мы скрываем значок и показываем текст на кнопке. Когда мы нажмем на кнопку, текст будет установлен в display:none, а значок — в display:block. Давайте сделаем это прямо сейчас.

В файл main.js добавьте следующий код

main.js
const btnSubmit = document.getElementById('btnSubmit')

btnSubmit.addEventListener('click', (event) => {
  event.preventDefault()

})
Вход в полноэкранный режим Выйти из полноэкранного режима

Итак, мы берем кнопку submit и присваиваем ее btnSubmit, затем слушаем событие click на кнопке submit. По умолчанию кнопка отправки формы заставляет веб-страницу обновляться при каждом нажатии. Чтобы предотвратить это, мы передаем аргумент event в функцию обратного вызова и вызываем функцию preventDefault() объекта event.

Теперь при нажатии на кнопку мы хотим скрыть текст (который сейчас отображается) и отобразить значок вращения (который сейчас скрыт). Давайте напишем этот код

main.js
  //Hide the text
  document.getElementById('btnSubmitText').style.display = 'none'

  //Display the spin icon
  document.querySelector('.fa-spinner').style.display = 'block'
Вход в полноэкранный режим Выйти из полноэкранного режима

Наш код нацеливается на элемент span, содержащий текст, по id и присваивает свойству display его объекта стиля значение none, что приводит к его скрытию. С другой стороны, иконка теперь отображается путем установки ее свойства display в block.

В этот момент, когда мы нажмем кнопку отправки, текст отправки скроется, а значок вращения отобразится.

Phewwwww…now это было много, и вы заслужили аплодисменты 🎉🙌🏽🍾🥳🥳🎉🎉🎉🙌🏽.

Но мы еще не закончили. Наш значок вращения продолжает вращаться, пока мы не обновим страницу, а мы этого явно не хотим.
Обычно, когда мы отправляем запрос формы, мы ожидаем ответа, и после ответа текст нашей кнопки должен отображаться, а иконка вращения должна быть скрыта.

Чтобы сделать это, мы просто изменим наш код на противоположный, как показано ниже;

main.js
  document.getElementById('btnSubmitText').style.display = 'block'
  document.querySelector('.fa-spinner').style.display = 'none'
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь, после добавления этого кода, все происходит настолько быстро, что мы не видим значок вращения, верно? Мы можем сымитировать запрос/ответ, добавив задержку в 2 секунды с помощью функции setTimeout.

Теперь наш файл main.js будет выглядеть следующим образом;

main.js
const btnSubmit = document.getElementById('btnSubmit')

btnSubmit.addEventListener('click', (event) => {
  event.preventDefault()

  //Hide the text
  document.getElementById('btnSubmitText').style.display = 'none'

  //Display the spin icon
  document.querySelector('.fa-spinner').style.display = 'block'

  //2 seconds delay
  setTimeout(() => {
    //Show the text after 2 seconds
    document.getElementById('btnSubmitText').style.display = 'block'

    //Hide the spin icon after 2 seconds
    document.querySelector('.fa-spinner').style.display = 'none'
  }, 2000)
})

Вход в полноэкранный режим Выйти из полноэкранного режима

Как я уже говорил, это всего лишь базовый уровень кодирования, но вы определенно можете сделать этот код лучше. Подумайте, как можно сделать его многоразовым, внедрив в код функции.

Вы можете загрузить файлы с моего ресурса github. Пожалуйста, не забудьте оставить лайк 👍🏼.

Спасибо, что потратили время на чтение и до встречи в следующем выпуске.

Оцените статью
devanswers.ru
Добавить комментарий