diff --git a/index.html b/index.html
index 846cf93..692696b 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,30 @@
     <title>Практика позиционирования</title>
     <link rel="stylesheet" href="styles.css">
 </head>
-<body>
+<body onload="move()">
     <!--Верстать тут-->
+    <div class="modal_window">
+        <div class="modal_window_content">
+            <div class="modal_window_close_container">
+                <button class="modal_window_close">Х</button>
+            </div>
+            <div class="progress-container" >
+                <p class="progress-bar-text2">LOADING</p>
+                <div class="progress-bar1">
+                    <p class="progress-bar-text1">LOADING</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class=imgHolder>
+        <img src="designs/logo2.png" alt="БОЛЬШОЙ ЧЕРНЫЙ ПЕТУХ">
+    </div>
+
+    <div class=imgHolder>
+        <img src="designs/logo5.png" alt="ЯПОНИЯ">
+    </div>
+
     <script src="index.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index dd50919..1ff7d86 100644
--- a/index.js
+++ b/index.js
@@ -4,4 +4,25 @@
     const element = document.querySelector('.myElement');
     element.style.color = 'red';
     element.style.width = '300px';
-*/
\ No newline at end of file
+*/
+
+function move() {
+    let elem = document.querySelector(".progress-bar1");
+    let width = 0;
+    let id = setInterval(frame, 33);
+    function frame() {
+        if (width >= 100) {
+            clearInterval(id);
+        }
+        else {
+            width++;
+            elem.style.width = width + "%";
+        }
+        elem.style['clipPath'] = `inset(0 ${100-width}% 0 0`
+    }
+}
+
+document.querySelector('.modal_window_close').onclick = function () {
+    document.querySelector('.modal_window').style.display = 'none';
+    document.querySelector('.modal_window').style.display = 'none';
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index e69de29..f050e1e 100644
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,90 @@
+
+.modal_window {
+    position: fixed;
+    z-index: 1000;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    top:  0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal_window .modal_window_content {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    width: 500px;
+    height: fit-content;
+    padding: 10px;
+    background-color: aliceblue;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.modal_window_close_container{
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    justify-content: flex-end;
+
+}
+
+
+.imgHolder{
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+    position: relative;
+}
+.imgHolder img {
+    width: 100%;
+    height: auto;
+    position: absolute;
+}
+
+.progress-container {
+    width: 100%;
+    background-color: gray;
+    color: black;
+    position: relative;
+}
+
+.progress-bar1 {
+    height: 30px;
+    background-color: purple;
+    color: white;
+    position: relative;
+    align-items: center;
+    line-height: 30px;
+}
+
+.progress-bar2 {
+    width: 0;
+    height: 30px;
+    background-color: red;
+    color: white;
+    position: relative;
+    align-items: center;
+    line-height: 30px;
+}
+
+.progress-bar-text1 {
+    width: 500px;
+    position: absolute;
+    top: -15px;
+    /*z-index: 3;*/
+    text-align: center;
+}
+
+.progress-bar-text2 {
+    width: 100%;
+    color: blue;
+    position: absolute;
+    top: -9px;
+    /*z-index: 3;*/
+    text-align: center;
+}
\ No newline at end of file
