Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Общие вопросы » Лоадер при нажатии на кнопки?

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

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

вопрос

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

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

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 секунды  
    });
});

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

Юзер

web102 - 2026-05-1818 мая 2026 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-1818 мая 2026 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-1818 мая 2026 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 технологии поражают конечно.

Похожие вопросы

tooltip в topnews.tpl

05.08.2012 ScreN Общие вопросы

Подскажите пожалуйста, а можно ли сделать, чтобы окно можно было перемещать мышкой?

12.01.2014 mypes Общие вопросы

Форма добавление комментариев

14.03.2014 vip.boss Общие вопросы

Плавающую навигационную панель

29.03.2014 savenco Общие вопросы

Как сделать чтобы черный менялся на белый цвет ?

18.06.2014 vip.boss Общие вопросы

Как изменить цвет рейтинга mrating

21.06.2014 vip.boss Общие вопросы

Скажите, пожалуйста

13.08.2014 vip.boss Общие вопросы

Как установить кнопку на сайт?

18.10.2014 Dimas777 Общие вопросы

где изменить AJAX(loading-layer) в dle 10.4 ?

21.04.2015 Баба Зина Общие вопросы

Как сделать затемнение фона при появлении preloader как на dle-faq ru?

11.02.2017 Stasiq Общие вопросы

Последние события

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

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

Спасибо за совет

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

Ups
Лоадер при нажатии на кнопки?
18-05-2026, 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
Лоадер при нажатии на кнопки?
18-05-2026, 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
Лоадер при нажатии на кнопки?
18-05-2026, 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
Лоадер при нажатии на кнопки?
18-05-2026, 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
Как правильно составить запрос в базу данных ?
17-05-2026, 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 установлен.

наверх