成品:

Вот код ‹html содержит css и js›:

‹!DOCTYPE html›

‹html lang="ru"›

‹голова›

‹meta charset="UTF-8"

‹meta http-equiv="X-UA-Compatible" content="IE=edge"›

‹meta name=”viewport” content=”width=device-width, initial-scale=1,0’›

‹title›Панель загрузки‹/название›

‹/голова›

‹стиль›

*{

поле: 0;

отступ: 0;

}

тело{

дисплей: гибкий;

минимальная высота: 100vh;

выравнивание элементов: по центру;

выравнивание содержимого: по центру;

цвет фона: #1b1919;

}

.container{

ширина: 70 %;

отступ: 50 пикселей 0;

фон: #1b1919;

box-shadow: 0 0 30px rgba(0, 0, 0 , 0,8);

радиус границы: 5 пикселей;

выравнивание текста: по центру;

}

.bar{

фон: #b6b6b6;

ширина: 90 %;

высота: 50 пикселей;

поле: 10 пикселей, авто;

граница-радиус: 50px;

переполнение: скрыто;

}

.fill{

высота: 100 %;

ширина: 1 %;

фон: линейный градиент (45deg,#f00144,#fd5900);

}

.counter{

размер шрифта: 40 пикселей;

семейство шрифтов: моноширинный

шрифт: 800;

цвет: #f00144;

отступ: 5px 0 ;

}

.кнопка{

текстовое преобразование: верхний регистр

размер шрифта: 20 пикселей;

шрифт: 800;

семейство шрифтов: моноширинный

цвет: #FFF;

фон: #000;

верхнее поле: 20 пикселей;

отступ: 5PX 10PX;

граница: нет;

курсор: указатель;

контур: нет;

граница:2px сплошная #f00144;

граница-радиус: 50px;

}

.output{

ширина: 50 %;

отступ: 30px 0;

фон: #1b1919;

граница-радиус: 5px;

box-shadow: 0 0 30px rgba(0, 0, 0 , 0,8);

выравнивание текста: по центру;

отображать: нет;

}

.output .fa-check{

высота: 150 пикселей;

ширина: 150 пикселей;

граница: 5 пикселей сплошная #f00144;

высота строки: 150 пикселей;

граница-радиус: 50%;

цвет:#f00144;

размер шрифта: 85 пикселей;

нижнее поле: 30 пикселей;

анимация: легкость анимации 1s;

}

@keyframes анимировать{

0%{

transform: translateY(60px)scale(0,7) rotate(0deg);

непрозрачность: 0,2;

}

50%{

преобразование: масштабирование(0,3), поворот(90 градусов), наклон Y(-40 градусов);

ширина: 50 пикселей;

}

75%{

преобразование: масштабирование(1.4), поворот(180 градусов), наклон Y(20 градусов);

ширина: 50 пикселей;

}

100%{

трансформировать: перевестиY(60px)масштабировать(1) повернуть(360deg);

прозрачность: 1;

}

}

.text{

размер шрифта: 40 пикселей;

толщина шрифта: 600;

семейство шрифтов: без засечек;

цвет: #f00144;

межбуквенный интервал: 1 пиксель;

}

‹/стиль›

‹тело›

‹div class="контейнер"›

‹div class="bar"›

‹div class="fill"›‹/div›

‹/дел›

‹div class="counter"›0%‹/div›

‹button class="button"›НАЖМИТЕ, ЧТОБЫ ЗАГРУЗИТЬ‹/button›

‹/дел›

‹div class="output"›

‹span class="fa-check"›✔‹/span›

‹div class="text "›Обработка завершена !!‹/div›

‹/дел›

‹script type="text/javascript"›

let container=document.querySelector(“.container”);

let output=document.querySelector(“.output”);

let fill=document.querySelector(“.fill”);

let click=document.querySelector(“.button”);

click.addEventListener(‘click’,()=›{

вар а=0;

var run =setInterval(frames,50);

функциональные фреймы(){

a=a+1;

if(a==101){

clearInterval(выполнить);

container.style.display="none";

output.style.display="блок";

}

еще{

var counter =document.querySelector(“.counter”);

counter.textContent=a+"%";

fill.style.width=a+"%";

}

}

})

‹/скрипт›

‹/тело›

‹/html›

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Ссылка:

Анимация панели загрузки Javascript при нажатии кнопки | Анимация индикатора выполнения в HTML CSS и JavaScript

https://www.youtube.com/watch?v=gR8gb_wWEnY