成品：
Вот код ‹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›
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
