diff --git a/index.html b/index.html index 846cf93..2eb292b 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,34 @@ - - + + + +
+
+ +

Загрузка

+
+
+
Loading...
+
+ +
+
+ +
+ + + +
+ + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..b96fdce 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,52 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const openBtn = document.querySelector('#openModal'); +const closeBtn = document.querySelector('#closeModal'); +const overlay = document.querySelector('#overlay'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +const progressBar = document.querySelector('#progressBar'); +const progressText = document.querySelector('#progressText'); + +let progress = 0; +let interval; + +function startProgress() { + progress = 0; + progressBar.style.width = '0%'; + + const duration = 3000; + const fps = 60; + const intervalTime = 1000 / fps; + const step = 100 / (duration / intervalTime); + + interval = setInterval(() => { + progress += step; + + if (progress >= 100) { + progress = 100; + clearInterval(interval); + } + progressBar.style.width = progress + '%'; + if (progress > 50) { + progressText.style.color = 'white'; + } else { + progressText.style.color = 'black'; + } + + }, intervalTime); +} + +openBtn.addEventListener('click', () => { + overlay.style.display = 'flex'; + startProgress(); +}); + +closeBtn.addEventListener('click', () => { + overlay.style.display = 'none'; + clearInterval(interval); +}); + +overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + overlay.style.display = 'none'; + clearInterval(interval); + } +}); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..34917fc 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,133 @@ +body { + margin: 0; + padding: 20px; + background-color: darkgrey; +} + +#openModal { + margin-bottom: 20px; + padding: 10px 15px; + font-size: 16px; + cursor: pointer; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: none; + justify-content: center; + align-items: center; +} + +.modal { + width: 640px; + max-width: 90%; + background: white; + padding: 20px; + border-radius: 8px; + position: relative; +} + +.close { + position: absolute; + top: 10px; + right: 10px; + + background: none; + border: none; + font-size: 24px; + cursor: pointer; +} + +.progress { + position: relative; + width: 100%; + height: 40px; + background: #ccc; + border-radius: 6px; + overflow: hidden; + margin-top: 20px; +} + +.progress-bar { + height: 100%; + width: 0%; + background: red; + transition: width 0.03s linear; +} + +.progress-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + font-weight: bold; + color: black; + pointer-events: none; +} + +.wraper { + display: flex; + gap: 20px; +} + +.logo { + width: 100px; + height: 100px; + position: relative; + overflow: hidden; +} + +.logomiky .gibball { + width: 60px; + height: 60px; + background: black; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -20%); +} + +.logomiky .leftball { + width: 31px; + height: 31px; + background: black; + border-radius: 50%; + position: absolute; + top: 18px; + left: 10px; +} + +.logomiky .rightball { + width: 31px; + height: 31px; + background: black; + border-radius: 50%; + position: absolute; + top: 18px; + right: 10px; +} + +.logojapan { + background: white; + display: flex; + justify-content: center; + align-items: center; +} + +.logojapan .redball { + width: 50px; + height: 50px; + background: red; + border-radius: 50%; +} + +.logojapan .redball:last-child { + display: none; +} \ No newline at end of file