Лоадер при нажатии на кнопки?

Ups 18.05.2026 Общие вопросы, Общие вопросы по вёрстке, Стили (CSS), jQuery, Ламерские вопросы 8

вопрос

Добрый.
Такой вопрос.
Нужен лоадер который будет появляться при нажатии на кнопку.
Сделал подобный:

HTML


<button type="submit" class="loaderbutton" id="submit">Click Me!</button>

CSS


.loaderbutton {
  padding: 10px 30px;
  background: #3e52c1;
  border: none;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2em;
  position: relative;
  display: block;
}

.loaderbutton::after {
  content: '';
  display: block;
  width: 1.1em;
  height: 1.1em;
  position: absolute;
  left: calc(50% - 0.75em);
  top: calc(50% - 0.75em);
  border: 0.2em solid transparent;
  border-right-color: white;
  border-radius: 50%;
  animation: loader-animation 0.7s linear infinite;
  opacity: 0;
}

@keyframes loader-animation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.loaderbutton.loading {
  color: transparent;
}

.loaderbutton.loading::after {
  opacity: 1;
}

javascript


const animBtn = document.getElementById("submit");

animBtn.addEventListener('click', () => {
  animBtn.classList.add("loading");
  //The following is used for demo purposes only//
  setTimeout(() => animBtn.classList.remove("loading"), 5000);
});

Пример работы
Не работает на несколько кнопок.. а нужно чтобы работало

Работать то работает.
Но проблема заключается в том - что он работает для одной кнопки.
Бывает что на странице по 5 кнопок.

Как его правильно сделать - чтобы работала для всех нужных кнопок на странице, а не только для одной ?

Ответил: Ups

3 комментария

Юзер

web102 - 2026-05-18Сегодня, 07:39 - #83445

Вы используете клик по кнопке с id="submit", а id должен быть уникальным.
исплользуйте класс:

document.querySelectorAll('.loaderbutton').forEach(btn =>
  btn.addEventListener('click', function() {
    this.classList.add('loading');
    setTimeout(() => this.classList.remove('loading'), 5000);
  })
);

Юзер

Ups - 2026-05-18Сегодня, 08:39 - #83446


var btn = document.querySelector('.loaderbutton');

btn.addEventListener('click',function() {
	btn.classList.toggle('loading');
	btn.innerText = 'Loading... Please wait!';
	btn.disabled = true;
	
	setTimeout(function() {
		btn.innerText = 'Download';
		btn.classList.toggle('loading');
		btn.disabled = false;
	}, 3000);  // здесь указывается в мс время для разблокировки кнопки
});

А как будет правильно из такого скрипта ?

Юзер

Ups - 2026-05-18Сегодня, 12:39 - #83447

Ну.. в общем вышло так. Работает четко.


var buttons = document.querySelectorAll('.loaderbutton');

buttons.forEach(function(btn) {
    btn.addEventListener('click', function() {
        btn.classList.add('loading');
        btn.innerText = 'Loading... Please wait!';
        btn.disabled = true;

        setTimeout(function() {
            btn.innerText = 'Download'; // Возвращаем текст  
            btn.classList.remove('loading'); // Убираем класс загрузки  
            btn.disabled = false; // Разблокируем кнопку  
        }, 3000); // Задержка 3 секунды  
    });
});

Мне помог это сделать https://aigptbot.ru/js/
За пару секунд код сам написал. Да.. новые AI технологии поражают конечно.

1191 | Как задать разный shortstory.tpl для выв ... ²

1191
Как задать разный shortstory.tpl для вывода по тегам, поиску и избранного?
Сегодня, 15:08

Спасибо за совет
Ups | Лоадер при нажатии на кнопки?

Ups
Лоадер при нажатии на кнопки?
Сегодня, 12:46

var buttons = document.querySelectorAll('.loaderbutton');

buttons.forEach(function(btn) {
btn.addEventListener('click', function() {
btn.classList.add('loading');
btn.innerText = 'Loading... Please wait!';
btn.disabled = true;

setTimeout(function() {
btn.innerText = 'Download'; // Возвращаем текст
btn.classList.remove('loading'); // Убираем класс загрузки
btn.disabled = false; // Разблокируем кнопку
}, 3000); // Задержка 3 секунды
});
});

Ups | Лоадер при нажатии на кнопки? ³

Ups
Лоадер при нажатии на кнопки?
Сегодня, 12:39

Ну.. в общем вышло так. Работает четко.


var buttons = document.querySelectorAll('.loaderbutton');

buttons.forEach(function(btn) {
    btn.addEventListener('click', function() {
        btn.classList.add('loading');
        btn.innerText = 'Loading... Please wait!';
        btn.disabled = true;

        setTimeout(function() {
            btn.innerText = 'Download'; // Возвращаем текст  
            btn.classList.remove('loading'); // Убираем класс загрузки  
            btn.disabled = false; // Разблокируем кнопку  
        }, 3000); // Задержка 3 секунды  
    });
});

Мне помог это сделать https://aigptbot.ru/js/
За пару секунд код сам написал. Да.. новые AI технологии поражают конечно.

Ups | Лоадер при нажатии на кнопки? ³

Ups
Лоадер при нажатии на кнопки?
Сегодня, 08:39


var btn = document.querySelector('.loaderbutton');

btn.addEventListener('click',function() {
	btn.classList.toggle('loading');
	btn.innerText = 'Loading... Please wait!';
	btn.disabled = true;
	
	setTimeout(function() {
		btn.innerText = 'Download';
		btn.classList.toggle('loading');
		btn.disabled = false;
	}, 3000);  // здесь указывается в мс время для разблокировки кнопки
});

А как будет правильно из такого скрипта ?

web102 | Лоадер при нажатии на кнопки? ³
web102
Лоадер при нажатии на кнопки?
Сегодня, 07:39
Вы используете клик по кнопке с id="submit", а id должен быть уникальным.
исплользуйте класс:
```
document.querySelectorAll('.loaderbutton').forEach(btn =>
  btn.addEventListener('click', function() {
    this.classList.add('loading');
    setTimeout(() => this.classList.remove('loading'), 5000);
  })
);
```
TModules | Как правильно составить запрос в базу да ...

TModules
Как правильно составить запрос в базу данных ?
Вчера, 13:40

START TRANSACTION;

UPDATE dle_comments_files
SET driver = 7
WHERE driver = 0;

-- проверка
SELECT COUNT(*) FROM dle_comments_files WHERE driver = 0;

COMMIT; -- или ROLLBACK;
web102 | Как правильно составить запрос в базу да ... ¹
web102
Как правильно составить запрос в базу данных ?
16-05-2026, 17:58
Как-то так наверное
```
UPDATE `dle_comments_files` SET `driver` = 7 WHERE `driver` = 0;
```
byroot | Как задать разный shortstory.tpl для выв ... ²
byroot
Как задать разный shortstory.tpl для вывода по тегам, поиску и избранного?
15-05-2026, 02:36
в shortstory.tpl использовать так
```
[aviable=cat]шаблон для категорий[/aviable]
[aviable=favorites]шаблон для закладок пользователя[/aviable]
```
и т.д.
Можно использовать available.

main - на главной странице
date - при просмотре новостей за определенные даты
cat - при просмотре категории
showfull - при просмотре полной новости
search - при просмотре результатов поиска
xfsearch - при просмотре новостей содержащим определенное дополнительное поле
userinfo - при просмотре профиля
register - при регистрации
stats - при просмотре статистики
pm - при просмотре персональных сообщений
feedback - при просмотре обратной связи
favorites - при просмотре закладок
newposts - при просмотре новых сообщений
addnews - при добавлении новости
lastnews - при просмотре последних новостей на сайте
lastcomments - при просмотре последних комментариев
lostpassword - при восстановлении пароля от аккаунта на сайте
static - при просмотре статических страниц
catalog - при просмотре каталога страниц
alltags - при просмотре облака тегов
tags - при просмотре новостей из облака тегов
allnews - при просмотре всех новостей на сайте или всех новостей какого либо пользователя
Darkzone | При загрузке картинки в новость получаю ... ¹

Darkzone
При загрузке картинки в новость получаю ошибку.?
13-05-2026, 15:09

Вопрос решен
TeraMoune | Как можно добавить тег [not-edit-date] т ... ⁷

TeraMoune
Как можно добавить тег [not-edit-date] текст [/not-edit-date]?
16-04-2026, 20:16

date должно проверятся с строкой уже прямо представляющую дату, а не date=d.m.Y. Проверяемые значения таким образом не преобразовываются.

Переводя на понятное вы пытаетесь проверить [if 2026-04-01 03:22="date=d.m.Y"].

[if view_edit ="0"] Отобразить что-то если дата редактирования новости не отображается.
[if editdate !=""] Отобразить что-то если дата изменения присвоена.
[if editdate =""] Отобразить что-то если новость не редактировалась.

Дата изменения будет равна пустоте если новость не редактировалась.

Если новости устанавливается отображение даты изменения то [edit-date] работает как условие [if editdate !=""]. Тег edit-date работает от двух полей view_edit = 1 и edtidate установлен.