Как сделать анимацию при нажатие на кнопку и потом вывести текст?

Question

[santavits]

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

Answer 1

[Александр]

Ну например вот так, не стал делать через переменные чтоб получилось короче, но суть думаю ясна:

document.getElementById('form').addEventListener('submit', function(e){
  e.preventDefault();
  // Показываем блок с заранее сделанной анимацие загрузки
  document.getElementById('loading').style.display = 'block';
  // Через 2 секунды запускаем функцию в которой скрываем блок с анимацией
  // и показываем нужный текст
  setTimeout(showText, 2000);
});

Comments

[santavits]

Вот пример хороший, даже очень
т.к как с яваскрипт я совсем не дружу, уточню некоторые детали
переменные form и loading
мне их обозначить в div?
типо

<div id="form"><img src="load.gif" /></div>
<div id="loading">мой текст</div>

[Александр]

santavits, Не совсем так. Картинку оберните в див с id='loading', ей будете давать display='block'. А диву с текстом, id например 'result-message', его будете показывать в функции showText.

[santavits]

Александр, создал я дивы, прописал в стилях чтобы они были скрытые hidden, чтобы их не было видно сразу
как сдеть чтобы их показывало после нажатию на кнопку

[Александр]

santavits, https://jsfiddle.net/56yea3my/

[santavits]

Александр, Спасибо большое)

Answer 2

[Дмитрий Гончаров]

Вот пример, если это отправка формы.
Jquery и Bootstrap js(для отображения всплывающих окон, можно заменить $('#elem').css('display' , 'block'); )

В модальное окно #ok помещена иконка загрузки(gif или через css, не важно)

$(".contact-form-jq").submit(function(event) {
    event.preventDefault();
    var data = $(this).serialize();
    url = 'mail.php';
    $('#ok').modal('show');
    var posting = $.post(url,
        data
    );
    posting.done(function(data) {
        $("#ok-text").html('<b>Заявка отправлена</b>');
  
    });
});

Comments

[santavits]

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

А надо как то так
Нажимаю на кнопку
Текст с формы загружается в базу данных
после этого показывается анимация 2 секунды
как анимация закончилась показывается текст