From 8955bfea896bf924ed5ad297b83175a9ff6c5a3d Mon Sep 17 00:00:00 2001 From: Ivan Fedorov Date: Tue, 2 Apr 2024 17:49:55 +0500 Subject: [PATCH 1/6] Progress bar almost done --- index.html | 15 +++++++++++++-- index.js | 34 ++++++++++++++++++++++++++++------ styles.css | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 74 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 846cf93..b868b06 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,18 @@ - - + + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..1021a4f 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,29 @@ -/* - Изменить элементу цвет и ширину можно вот так: +// Изменить элементу цвет и ширину можно вот так: - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +// const element = document.querySelector('.myElement'); +// element.style.color = 'red'; +// element.style.width = '300px'; + +const openModalButton = document.getElementById('openModal'); +const progressModal = document.getElementById('progressModal'); + +const progressBar = document.getElementById('progress-bar') + +// const progressBar = document.querySelector('.progress-bar') + +openModalButton.addEventListener('click', () => { + progressModal.style.display = 'block'; + + progressBar.style.width = '0px'; + + let width = 0; + const interval = setInterval(() => { + if (width >= 200) { + clearInterval(interval); + // progressModal.style.display = 'none'; + } else { + width += 20; + progressBar.style.width = `${width}px`; + } + }, 300); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..b04e125 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,33 @@ +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); +} + +.progress-container { + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 200px; + background-color: #ccc; + border-radius: 10px; + padding: 10px; +} + +.progress-container .progress-bar { + position: relative; + width: 0; + height: 20px; + background-color: red; +} + +.progress-container .progress-text { + position: absolute; + text-align: center; +} \ No newline at end of file From 20478b42f088374d7615af33904b869f93747762 Mon Sep 17 00:00:00 2001 From: Ivan Fedorov Date: Tue, 2 Apr 2024 18:11:44 +0500 Subject: [PATCH 2/6] Progress bar... --- index.html | 8 ++++--- index.js | 4 ++-- styles.css | 61 ++++++++++++++++++++++++++++++++---------------------- 3 files changed, 43 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index b868b06..b2ccdb2 100644 --- a/index.html +++ b/index.html @@ -11,13 +11,15 @@