diff --git a/index.html b/index.html
index 846cf93..9456175 100644
--- a/index.html
+++ b/index.html
@@ -8,5 +8,26 @@
 <body>
     <!--Верстать тут-->
     <script src="index.js"></script>
+    <img class="logo" src = "/designs/logo3.jpg">
+    <img class="logo" src="/designs/logo7.png">
+    <div class="background_modal">
+        <div class="modal_window">
+            Это просто модальное окно. Его можно закрыть, ничего не произойдёт<br>
+            Это просто модальное окно. Его можно закрыть, ничего не произойдёт<br>
+            Это просто модальное окно. Его можно закрыть, ничего не произойдёт<br>
+            Это просто модальное окно. Его можно закрыть, ничего не произойдёт<br>
+            Это просто модальное окно. Его можно закрыть, ничего не произойдёт<br>
+            Это просто модальное окно. Его можно закрыть, ничего не произойдёт
+            <div class="bar_container">
+                <div class="gray_bar">
+                    <span class ="black_text">Loading...</span>
+                </div>
+                <div class="red_bar">
+                    <span class="white_text">Loading...</span>
+                </div>
+            </div>
+            <button class="modal_close">X</button>
+        </div>
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index dd50919..17cce90 100644
--- a/index.js
+++ b/index.js
@@ -1,7 +1,24 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
+function setProgress(progress) {
+    const element = document.querySelector('.red_bar');
+    element.style.clipPath = `inset(0 ${100 - progress}% 0 0)`;
+}
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
\ No newline at end of file
+function animateProgress(milliseconds) {
+    const totalTime = 3000
+    const progress = Math.min(100, Math.floor(milliseconds / totalTime * 100));
+    setProgress(progress);
+    if (progress >= 100) {
+        return;
+    }
+    requestAnimationFrame(animateProgress);
+}
+
+requestAnimationFrame(animateProgress);
+//
+// function animateProgress2(totalMilliseconds, time=0){
+//     setProgress(Math.floor(time / totalMilliseconds * 100));
+//     const deltaTime = 1;
+//     setTimeout(() => animateProgress2(totalMilliseconds, deltaTime + time), deltaTime);
+// }
+//
+// animateProgress2(3000);
\ No newline at end of file
diff --git a/styles.css b/styles.css
index e69de29..b15c2d2 100644
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,65 @@
+.background_modal{
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+    background-color: rgba(100, 100, 100, 0.5);
+}
+
+.modal_window{
+    position: relative;
+    display:flex;
+    flex-direction: column;
+    width: 640px;
+    background-color: #fff;
+    padding: 20px;
+}
+
+.modal_close{
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background-color: transparent;
+    border: none;
+}
+
+.logo{
+    overflow: hidden;
+    max-width: 100px;
+    max-height: 100px;
+    object-fit: contain;
+}
+
+.bar_container {
+    width: 100%;
+    height: 30px;
+}
+
+.gray_bar {
+    background-color: #ccc;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+}
+
+.red_bar {
+    background-color: red;
+    clip-path: inset(0 90% 0 0);
+    height: 100%;
+    position: relative;
+    overflow: clip;
+    bottom: 30px;
+    left: 0;
+}
+.white_text{
+    color: white;
+    display: flex;
+    justify-content: center;
+}
\ No newline at end of file
