diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..93e1d5e --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/positioning1.iml b/.idea/positioning1.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/positioning1.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 846cf93..608027a 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,24 @@ +
+ +
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..f6fd57c 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,34 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + + +const modal = document.getElementById("myModal"); +const closeBtn = document.querySelector(".close"); + +closeBtn.onclick = function() { + modal.style.display = "none"; +} + +const progressBar = document.querySelector('.progress'); + +function fillProgressBar(duration) { + let startTime = null; + + function animate(timestamp) { + if (!startTime) { + startTime = timestamp; + } + const progress = timestamp - startTime; + const percentage = Math.min(progress / duration * 100, 100); + progressBar.style.width = percentage + '%'; + + if (progress < duration) { + requestAnimationFrame(animate); + } + } + requestAnimationFrame(animate); +} + +fillProgressBar(3000); diff --git a/styles.css b/styles.css index e69de29..35146af 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,77 @@ +.modal { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + +} + +.modal-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 640px; + height: auto; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + cursor: pointer; +}.logo { + width: 100px; + height: 100px; + overflow: hidden; + margin: 10px; + border: blue 5px solid; +} + +.logo img { + width: 100%; + height: auto; +} + + + +.bar { + background-color: gray; + width: 100%; + height: 30px; + position: relative; +} + +.bar::before, .progress::before { + content: "Loading..."; + font-size: 25px; + color: white; + position: absolute; + left: 325px; + top: 15px; + transform: translate(-50%, -50%); +} + +.bar::before { + color: black; +} + +.progress { + position: absolute; + font-size: 24px; + background-color: red; + height: 100%; + overflow: hidden; +}