Как добавить setTimeout и прогресс бар в код?

Question

Есть код, который создает ссылку и все отлично работает. Но я хочу усложнить его, сделать задержку с появление прогресс бара, между нажатием на кнопку и выводом ссылки. Пробовал через setTimeout, но не получилось. Как соединить код вывода ссылки, задержку(например 10 секунд) и прогресс бар?

По задумке должно получиться так:

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

Код создание ссылки:

add.onclick = function () {
    let val = document.getElementById('inp').value; // Получаем значение введённых данных
    let main = document.getElementsByClassName('main'); // Получаем блок родителя
    let div = document.createElement('div'); // Создаём div
    let a = document.createElement('a'); // создаём элемент a
    val = 'https://site.ru/track?' + val; // Добавляем к ссылке введённые данные
    a.innerText = val; // В текст <a> вставляем сформированную ссылку
    a.setAttribute('href', val); // Вставляем в href ссылку для кликабельности
    div.appendChild(a); // Добавляем атрибут a в div
    main[0].appendChild(div); // добавляем div в родительский блок.
}

<div class="main">
    <input id="inp">
    <button id="add">Создать ссылку</button>
</div>

Вывод прогресс бара:

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

<div id="myProgress">
  <div id="myBar"></div>
</div>
<br>
<button onclick="move()">Создать ссылку</button>

Answer 1

    document.getElementById('myProgress').style.display = 'none';
    add.onclick = function () {
        function makeLink() {
            let val = document.getElementById('inp').value; // Получаем значение введённых данных
            let main = document.getElementsByClassName('main'); // Получаем блок родителя
            let div = document.createElement('div'); // Создаём div
            let a = document.createElement('a'); // создаём элемент a
            val = 'https://site.ru/track?' + val; // Добавляем к ссылке введённые данные
            a.innerText = val; // В текст <a> вставляем сформированную ссылку
            a.setAttribute('href', val); // Вставляем в href ссылку для кликабельности
            div.appendChild(a); // Добавляем атрибут a в div
            main[0].appendChild(div); // добавляем div в родительский блок.
            document.getElementById('myProgress').style.display = 'none';
        }
        move();
        setTimeout(makeLink, 10000);
    };
    var i = 0;
    function move() {
        document.getElementById('myProgress').style.display = 'block';
        if (i == 0) {
            i = 1;
            var elem = document.getElementById("myBar");
            var width = 1;
            var id = setInterval(frame, 100);
            function frame() {
                if (width >= 100) {
                    clearInterval(id);
                    i = 0;
                } else {
                    width++;
                    elem.style.width = width + "%";
                }
            }
        }
    }

    #myProgress {
        width: 100%;
        background-color: #ddd;
    }

    #myBar {
        width: 1%;
        height: 30px;
        background-color: #4CAF50;
    }

<div class="main">
    <input id="inp">
    <button id="add">Создать ссылку</button>
</div>
<div id="myProgress">
    <div id="myBar"></div>
</div>
<br>

БЛОГ НА HUSL

Как добавить setTimeout и прогресс бар в код?

Ответы (1 шт):