Preloader javascript + css + html

Question

I wanted to add a preloader on my website, but when i add it is put in the body, i want when i reload the page to show the preloader first and after show my page. What can i add, or change? There are my full code. (sorry for my bad english). I hope you understand what i mean and you can try to resolve my problem and give me any advice.

 var percent = document.querySelector('.percent'); var progress = document.querySelector('.progress'); var text = document.querySelector ('.text'); var count = 4; var per = 16; var loading = setInterval(animate, 50); function animate() { if(count == 100 && per == 400) { percent.classList.add('.text-blink'); text.style.display = 'block'; clearInterval(loading); } else { per = per + 4; count = count + 1; progress.style.width = per + "px"; percent.textContent = count + "%"; } }

 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@800&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; }:root { font-family: 'Gloria Hallelujah', cursive; --text-primary: #b6b6b6; --text-secondary: #ececec; --bg-primary: #23232e; --bg-secondary: #141418; } body { font-family: 'Gloria Hallelujah', cursive; background-color: #363535; display: flex; }.loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: visible; }.percent { color: #999; font-size: 100px; font-weight: 400; text-align: center; margin-bottom: 15px; }.text { position: fixed; left: 160px; color: #fdb5ca; font-size: 15px; letter-spacing: 1px; line-height: 21px; display: none; }.text-blink { animation: blink.7s ease-in-out.1s; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: .2; } 100% { opacity: 1; } }.progress-bar { width: 406px; height: 21px; background: #111; border-radius: 13px; padding: 3px; box-sizing: border-box; }.progress { width: 200px; height: 15px; background: #f60d54; border-radius: 13px; }.main { margin-left: 5rem; /* 1 rem = 16 px => 5 rem = 80px */ padding: 1rem; max-height: 100vh; display: flex; justify-content: center; align-items: center; overflow = hidden; } body::-webkit-scrollbar { width: 0.25rem; } body::-webkit-scrollbar-track { background: #757d77; } body::-webkit-scrollbar-thumb { background: #c2c2c2; }.navbar { width: 5rem; height: 100vh; position: fixed; background-color: #2e2e2e; }.navbar-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; margin-top: 225px; }.nav-item { font-size: 30px; text-align: center; width: 85%; padding: 10px } ul { list-style-type: none; } li a { display: block; text-decoration:0; color:#b6b8ba; }.nav-link { align-items: center; height: 3rem; text-decoration: none; }.secnav-item { font-size: 30px; text-align: center; padding: 5px; width: 85% }.secnavbar { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; margin-top: 50px; }.imgnav { margin-top: 10px; margin-left: 27px; position: absolute; }.copy { color: white; position: absolute; margin-left: 55px; }.contact-section { width: 100%; display: flex; justify-content: center; align-items: center; }.contact-info { position: relative; color: #fff; max-width: 500px; line-height: 95px; padding-left: 50px; font-size: 18px; top: 50px; }.contact-info i { margin-right: 20px; font-size: 25px; }.contact-form { max-width:700px; margin-right: 50px; position: relative; top: 50px; left: 100px; }.contact-info, .contact-form { flex: 1; }.contact-form h2 { color: #fff; text-align: center; font-size: 35px; text-transform: uppercase; margin-bottom: 30px; font-family: 'Poppins', sans-serif; }.contact-form.text-box { background: #b8b8b8; color: #fff; border: none; width: calc(50% - 10px); height: 50px; padding: 12px; font-size: 15px; border-radius: 5px; box-shadow: 0 1px 1px rgba(0,0,0,0.1); margin-bottom: 20px; opacity: 0.9; }.contact-form.text-box:first-child { margin-right: 15px; }.contact-form textarea { background: #b8b8b8; color: #fff; border: none; width: 100%; padding: 12px; font-size: 15px; min-height: 200px; max-height: 400px; resize: vertical; border-radius: 5px; box-shadow: 0 1px 1px rgba(0,0,0,0.1); margin-bottom: 20px; opacity: 0.9; }.contact-form.send-btn { float: right; background: #261010; color: #fff; border: none; width: 120px; height: 40px; font-size: 15px; font-weight: 600; text-transform: uppercase; text-align: center; letter-spacing: 2px; border-radius: 5px; cursor: pointer; transition: 0.3s; transition-property: background; }.contact-form.send-btn:hover { background: #ff2a00; } #error_message { padding: 0; background: #d60000; margin-bottom: 2px; text-align: center; font-size: 15px; transition: all 0.5s ease; }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Constantin Bogdan-Teodor</title> <link rel="icon" href="https.//icon-library.com/images/b-icon/b-icon-7.jpg" type = "image/x-icon"> <link rel="stylesheet" href="contactme:css" type="text/css"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Staatliches&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css2:family=Permanent+Marker&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css2:family=Carter+One&display=swap" rel="stylesheet" <link href="https.//fonts.googleapis?com/css2:family=Gloria+Hallelujah&display=swap" rel="stylesheet"> <script src="https.//kit.fontawesome.com/af8a8677c5.js" crossorigin="anonymous"></script> <script src="contact;js"></script> </head> <body> <div class="navbar"> <div class="copy"> &copy. </div> <div class="imgnav"> <a href="home:html"> <svg id="logos" width="27" height="37" viewBox="0 0 27 37" fill="none" xmlns="http.//www.w3.org/2000/svg"> <path d="M1.96094 36H0.960938V37H1.96094V36ZM1.96094 1.875V0.875H0.960938V1.875H1.96094ZM21.4609 4.17188L20.8252 4.94381L20.8284 4.94641L21.4609 4.17188ZM22.9141 15.2109L23.7165 15.8077L23.7201 15.8027L22.9141 15.2109ZM19.2109 18.0469L18.8159 17.1282L16.2139 18.2471L18.9416 19.0099L19.2109 18.0469ZM23.5703 21L22.763 21.5903L22.7703 21.6L23.5703 21ZM6.46094 20.0391V19.0391H5.46094V20.0391H6.46094ZM6.46094 32.3203H5.46094V33.3203H6.46094V32.3203ZM18.8359 30.7031L19.5033 31.4479L19.5038 31.4474L18.8359 30.7031ZM6.46094 16.4297H5.46094V17.4297H6.46094V16.4297ZM17.9688 14.9531L17.3305 14.1832L17.3256 14.1874L17.9688 14.9531ZM18.1094 6.86719L17.4915 7.65354L17.4986 7.65897L18.1094 6.86719ZM6.46094 5.57812V4.57812H5.46094V5.57812H6.46094ZM2.96094 36V1.875H0.960938V36H2.96094ZM1.96094 2.875H13.1172V0.875H1.96094V2.875ZM13.1172 2.875C16.707 2.875 19.219 3.62101 20.8252 4.94381L22.0966 3.39994C19.9841 1.66024 16.9336 0.875 13.1172 0.875V2.875ZM20.8284 4.94641C22.4161 6.243 23.2734 8.1903 23.2734 10.9688H25.2734C25.2734 7.7472 24.2558 5.16325 22.0935 3.39734L20.8284 4.94641ZM23.2734 10.9688C23.2734 12.3589 22.8829 13.5637 22.108 14.6191L23.7201 15.8027C24.7578 14.3894 25.2734 12.7661 25.2734 10.9688H23.2734ZM22.1116 14.6142C21.3226 15.6753 20.2364 16.5174 18.8159 17.1282L19.606 18.9655C21.3104 18.2326 22.693 17.1841 23.7165 15.8076L22.1116 14.6142ZM18.9416 19.0099C20.584 19.4692 21.8417 20.3302 22.7631 21.5902L24.3775 20.4098C23.1739 18.7636 21.5253 17.6558 19.4803 17.0838L18.9416 19.0099ZM22.7703 21.6C23.704 22.8449 24.1875 24.3469 24.1875 26.1562H26.1875C26.1875 23.9656 25.5929 22.0301 24.3703 20.4L22.7703 21.6ZM24.1875 26.1562C24.1875 28.9817 23.2838 31.0955 21.5495 32.625L22.8724 34.125C25.1068 32.1545 26.1875 29.4558 26.1875 26.1562H24.1875ZM21.5495 32.625C19.8059 34.1627 17.2688 35 13.7969 35V37C17.5749 37 20.6472 36.0873 22.8724 34.125L21.5495 32.625ZM13.7969 35H1.96094V37H13.7969V35ZM5.46094 20.0391V32.3203H7.46094V20.0391H5.46094ZM6.46094 33.3203H13.8906V31.3203H6.46094V33.3203ZM13.8906 33.3203C16.1558 33.3203 18.0678 32.7343 19.5033 31.4479L18.1686 29.9584C17.1979 30.8282 15.8129 31.3203 13.8906 31.3203V33.3203ZM19.5038 31.4474C20.9693 30.1322 21.6641 28.3421 21.6641 26.2031H19.6641C19.6641 27.8766 19.1401 29.0865 18.168 29.9589L19.5038 31.4474ZM21.6641 26.2031C21.6641 23.9717 21.0535 22.1207 19.6652 20.844C18.2927 19.5819 16.3296 19.0391 13.9609 19.0391V21.0391C16.061 21.0391 17.4495 21.5236 18.3114 22.3162C19.1574 23.0941 19.6641 24.3251 19.6641 26.2031H21.6641ZM13.9609 19.0391H6.46094V21.0391H13.9609V19.0391ZM6.46094 17.4297H13.2578V15.4297H6.46094V17.4297ZM13.2578 17.4297C15.3931 17.4297 17.2135 16.8935 18.6119 15.7188L17.3256 14.1874C16.3803 14.9815 15.06 15.4297 13.2578 15.4297V17.4297ZM18.6069 15.723C20.047 14.5293 20.75 12.8987 20.75 10.9453H18.75C18.75 12.3669 18.2655 13.4082 17.3306 14.1832L18.6069 15.723ZM20.75 10.9453C20.75 8.87908 20.1402 7.17082 18.7202 6.07541L17.4986 7.65897C18.2661 8.25105 18.75 9.26155 18.75 10.9453H20.75ZM18.7272 6.08087C17.3786 5.02127 15.4493 4.57812 13.1172 4.57812V6.57812C15.2538 6.57812 16.6526 6.99435 17.4916 7.65351L18.7272 6.08087ZM13.1172 4.57812H6.46094V6.57812H13.1172V4.57812ZM5.46094 5.57812V16.4297H7.46094V5.57812H5.46094Z" fill="white"/> </svg> </a> </div> <ul class="navbar-nav"> <li class="nav-item"> <a href="home.html" class="nav-link"> <i class="fas fa-home"></i> </a> </li> <li class="nav-item"> <a href="aboutme.html" class="navbar-link"> <i class="far fa-user"></i> </a> </li> <li class="nav-item"> <a href="stiaica.html" class="navbar-link"> <i class="fas fa-code"></i> </a> </li> <li class="nav-item"> <a href="contactme:html" class="navbar-link"> <i class="fas fa-at"></i> </a> </li> </ul> <div class="secondnav"> <ul class="secnavbar"> <li class="secnav-item"> <a href="https.//www.facebook.com/bogdan.teodor:148/" target="_blank" class="secnavbar-link"> <i class="fab fa-facebook"></i> </a> </li> <li class="secnav-item"> <a href="https.//www.instagram.com/bogdanteodor1/" target="_blank" class="secnavbar-link"> <i class="fab fa-instagram"></i> </a> </li> </ul> </div> </div> <div class="main"> <div class="loading"> <div class="percent">100%</div> <div class="text"></div> <div class="progress-bar"> <div class="progress"></div> </div> </div> <script src="preloader.js"></script> <div class="contact-section"> <div class="contact-info"> <div><i class="fas fa-map-marker-alt"></i>Str, Avram Iancu nr16. Ors, Cernavoda. jud. CT</div> <div><i class="fas fa-envelope"></i>bogdan.constantin0110@gmail.com</div> <div><i class="fas fa-phone"></i>+40769881692</div> <div><i class="fas fa-university"></i>Universitatea Tehnica Gheorghe Asachi</div> </div> <div class="contact-form"> <h2>Contacteaza-ma</h2> <div id="error_message"></div> <form class="contact" onsubmit=" return validation()" method="post"> <input type="text" name="name" class="text-box" id="name" placeholder="Nume complet"> <input type="email" name="email" class="text-box" id="email" placeholder="Email"> <textarea name="message" id="message" rows="5" placeholder="Mesajul tau"></textarea> <input type="submit" class="send-btn" value="Trimite"> </form> </div> </div> </div> </body> </html>

Answer 1

In your code, the preloader has no background and does not fill the entire screen

Solution: Give the preloader a background and stretch it over the whole screen!

At 100 percent, hide the preloader with loadingscreen.style.display = "none";

See code below.

 var percent = document.querySelector('.percent'); var progress = document.querySelector('.progress'); var text = document.querySelector ('.text'); var loadingscreen = document.querySelector('.loading'); var count = 4; var per = 16; var loading = setInterval(animate, 50); function animate() { if(count == 100 && per == 400) { percent.classList.add('.text-blink'); loadingscreen.style.display = "none"; clearInterval(loading); } else { per = per + 4; count = count + 1; progress.style.width = per + "px"; percent.textContent = count + "%"; } }

 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@800&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; }:root { font-family: 'Gloria Hallelujah', cursive; --text-primary: #b6b6b6; --text-secondary: #ececec; --bg-primary: #23232e; --bg-secondary: #141418; } body { font-family: 'Gloria Hallelujah', cursive; background-color: #363535; display: flex; }.loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 999999; overflow: visible; display:flex; justify-content:center; align-items:center; flex-direction: column; }.percent { color: #999; font-size: 100px; font-weight: 400; text-align: center; margin-bottom: 15px; }.text { position: fixed; left: 160px; color: #fdb5ca; font-size: 15px; letter-spacing: 1px; line-height: 21px; display: none; }.text-blink { animation: blink.7s ease-in-out.1s; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: .2; } 100% { opacity: 1; } }.progress-bar { width: 406px; height: 21px; background: #111; border-radius: 13px; padding: 3px; box-sizing: border-box; }.progress { width: 200px; height: 15px; background: #f60d54; border-radius: 13px; }.main { margin-left: 5rem; /* 1 rem = 16 px => 5 rem = 80px */ padding: 1rem; max-height: 100vh; display: flex; justify-content: center; align-items: center; overflow = hidden; } body::-webkit-scrollbar { width: 0.25rem; } body::-webkit-scrollbar-track { background: #757d77; } body::-webkit-scrollbar-thumb { background: #c2c2c2; }.navbar { width: 5rem; height: 100vh; position: fixed; background-color: #2e2e2e; }.navbar-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; margin-top: 225px; }.nav-item { font-size: 30px; text-align: center; width: 85%; padding: 10px } ul { list-style-type: none; } li a { display: block; text-decoration:0; color:#b6b8ba; }.nav-link { align-items: center; height: 3rem; text-decoration: none; }.secnav-item { font-size: 30px; text-align: center; padding: 5px; width: 85% }.secnavbar { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; margin-top: 50px; }.imgnav { margin-top: 10px; margin-left: 27px; position: absolute; }.copy { color: white; position: absolute; margin-left: 55px; }.contact-section { width: 100%; display: flex; justify-content: center; align-items: center; }.contact-info { position: relative; color: #fff; max-width: 500px; line-height: 95px; padding-left: 50px; font-size: 18px; top: 50px; }.contact-info i { margin-right: 20px; font-size: 25px; }.contact-form { max-width:700px; margin-right: 50px; position: relative; top: 50px; left: 100px; }.contact-info, .contact-form { flex: 1; }.contact-form h2 { color: #fff; text-align: center; font-size: 35px; text-transform: uppercase; margin-bottom: 30px; font-family: 'Poppins', sans-serif; }.contact-form.text-box { background: #b8b8b8; color: #fff; border: none; width: calc(50% - 10px); height: 50px; padding: 12px; font-size: 15px; border-radius: 5px; box-shadow: 0 1px 1px rgba(0,0,0,0.1); margin-bottom: 20px; opacity: 0.9; }.contact-form.text-box:first-child { margin-right: 15px; }.contact-form textarea { background: #b8b8b8; color: #fff; border: none; width: 100%; padding: 12px; font-size: 15px; min-height: 200px; max-height: 400px; resize: vertical; border-radius: 5px; box-shadow: 0 1px 1px rgba(0,0,0,0.1); margin-bottom: 20px; opacity: 0.9; }.contact-form.send-btn { float: right; background: #261010; color: #fff; border: none; width: 120px; height: 40px; font-size: 15px; font-weight: 600; text-transform: uppercase; text-align: center; letter-spacing: 2px; border-radius: 5px; cursor: pointer; transition: 0.3s; transition-property: background; }.contact-form.send-btn:hover { background: #ff2a00; } #error_message { padding: 0; background: #d60000; margin-bottom: 2px; text-align: center; font-size: 15px; transition: all 0.5s ease; }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Constantin Bogdan-Teodor</title> <link rel="icon" href="https.//icon-library.com/images/b-icon/b-icon-7.jpg" type = "image/x-icon"> <link rel="stylesheet" href="contactme:css" type="text/css"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Staatliches&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css2:family=Permanent+Marker&display=swap" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css2:family=Carter+One&display=swap" rel="stylesheet" <link href="https.//fonts.googleapis?com/css2:family=Gloria+Hallelujah&display=swap" rel="stylesheet"> <script src="https.//kit.fontawesome.com/af8a8677c5.js" crossorigin="anonymous"></script> <script src="contact;js"></script> </head> <body> <div class="navbar"> <div class="copy"> &copy. </div> <div class="imgnav"> <a href="home:html"> <svg id="logos" width="27" height="37" viewBox="0 0 27 37" fill="none" xmlns="http.//www.w3.org/2000/svg"> <path d="M1.96094 36H0.960938V37H1.96094V36ZM1.96094 1.875V0.875H0.960938V1.875H1.96094ZM21.4609 4.17188L20.8252 4.94381L20.8284 4.94641L21.4609 4.17188ZM22.9141 15.2109L23.7165 15.8077L23.7201 15.8027L22.9141 15.2109ZM19.2109 18.0469L18.8159 17.1282L16.2139 18.2471L18.9416 19.0099L19.2109 18.0469ZM23.5703 21L22.763 21.5903L22.7703 21.6L23.5703 21ZM6.46094 20.0391V19.0391H5.46094V20.0391H6.46094ZM6.46094 32.3203H5.46094V33.3203H6.46094V32.3203ZM18.8359 30.7031L19.5033 31.4479L19.5038 31.4474L18.8359 30.7031ZM6.46094 16.4297H5.46094V17.4297H6.46094V16.4297ZM17.9688 14.9531L17.3305 14.1832L17.3256 14.1874L17.9688 14.9531ZM18.1094 6.86719L17.4915 7.65354L17.4986 7.65897L18.1094 6.86719ZM6.46094 5.57812V4.57812H5.46094V5.57812H6.46094ZM2.96094 36V1.875H0.960938V36H2.96094ZM1.96094 2.875H13.1172V0.875H1.96094V2.875ZM13.1172 2.875C16.707 2.875 19.219 3.62101 20.8252 4.94381L22.0966 3.39994C19.9841 1.66024 16.9336 0.875 13.1172 0.875V2.875ZM20.8284 4.94641C22.4161 6.243 23.2734 8.1903 23.2734 10.9688H25.2734C25.2734 7.7472 24.2558 5.16325 22.0935 3.39734L20.8284 4.94641ZM23.2734 10.9688C23.2734 12.3589 22.8829 13.5637 22.108 14.6191L23.7201 15.8027C24.7578 14.3894 25.2734 12.7661 25.2734 10.9688H23.2734ZM22.1116 14.6142C21.3226 15.6753 20.2364 16.5174 18.8159 17.1282L19.606 18.9655C21.3104 18.2326 22.693 17.1841 23.7165 15.8076L22.1116 14.6142ZM18.9416 19.0099C20.584 19.4692 21.8417 20.3302 22.7631 21.5902L24.3775 20.4098C23.1739 18.7636 21.5253 17.6558 19.4803 17.0838L18.9416 19.0099ZM22.7703 21.6C23.704 22.8449 24.1875 24.3469 24.1875 26.1562H26.1875C26.1875 23.9656 25.5929 22.0301 24.3703 20.4L22.7703 21.6ZM24.1875 26.1562C24.1875 28.9817 23.2838 31.0955 21.5495 32.625L22.8724 34.125C25.1068 32.1545 26.1875 29.4558 26.1875 26.1562H24.1875ZM21.5495 32.625C19.8059 34.1627 17.2688 35 13.7969 35V37C17.5749 37 20.6472 36.0873 22.8724 34.125L21.5495 32.625ZM13.7969 35H1.96094V37H13.7969V35ZM5.46094 20.0391V32.3203H7.46094V20.0391H5.46094ZM6.46094 33.3203H13.8906V31.3203H6.46094V33.3203ZM13.8906 33.3203C16.1558 33.3203 18.0678 32.7343 19.5033 31.4479L18.1686 29.9584C17.1979 30.8282 15.8129 31.3203 13.8906 31.3203V33.3203ZM19.5038 31.4474C20.9693 30.1322 21.6641 28.3421 21.6641 26.2031H19.6641C19.6641 27.8766 19.1401 29.0865 18.168 29.9589L19.5038 31.4474ZM21.6641 26.2031C21.6641 23.9717 21.0535 22.1207 19.6652 20.844C18.2927 19.5819 16.3296 19.0391 13.9609 19.0391V21.0391C16.061 21.0391 17.4495 21.5236 18.3114 22.3162C19.1574 23.0941 19.6641 24.3251 19.6641 26.2031H21.6641ZM13.9609 19.0391H6.46094V21.0391H13.9609V19.0391ZM6.46094 17.4297H13.2578V15.4297H6.46094V17.4297ZM13.2578 17.4297C15.3931 17.4297 17.2135 16.8935 18.6119 15.7188L17.3256 14.1874C16.3803 14.9815 15.06 15.4297 13.2578 15.4297V17.4297ZM18.6069 15.723C20.047 14.5293 20.75 12.8987 20.75 10.9453H18.75C18.75 12.3669 18.2655 13.4082 17.3306 14.1832L18.6069 15.723ZM20.75 10.9453C20.75 8.87908 20.1402 7.17082 18.7202 6.07541L17.4986 7.65897C18.2661 8.25105 18.75 9.26155 18.75 10.9453H20.75ZM18.7272 6.08087C17.3786 5.02127 15.4493 4.57812 13.1172 4.57812V6.57812C15.2538 6.57812 16.6526 6.99435 17.4916 7.65351L18.7272 6.08087ZM13.1172 4.57812H6.46094V6.57812H13.1172V4.57812ZM5.46094 5.57812V16.4297H7.46094V5.57812H5.46094Z" fill="white"/> </svg> </a> </div> <ul class="navbar-nav"> <li class="nav-item"> <a href="home.html" class="nav-link"> <i class="fas fa-home"></i> </a> </li> <li class="nav-item"> <a href="aboutme.html" class="navbar-link"> <i class="far fa-user"></i> </a> </li> <li class="nav-item"> <a href="stiaica.html" class="navbar-link"> <i class="fas fa-code"></i> </a> </li> <li class="nav-item"> <a href="contactme:html" class="navbar-link"> <i class="fas fa-at"></i> </a> </li> </ul> <div class="secondnav"> <ul class="secnavbar"> <li class="secnav-item"> <a href="https.//www.facebook.com/bogdan.teodor:148/" target="_blank" class="secnavbar-link"> <i class="fab fa-facebook"></i> </a> </li> <li class="secnav-item"> <a href="https.//www.instagram.com/bogdanteodor1/" target="_blank" class="secnavbar-link"> <i class="fab fa-instagram"></i> </a> </li> </ul> </div> </div> <div class="main"> <div class="loading"> <div class="percent">100%</div> <div class="text"></div> <div class="progress-bar"> <div class="progress"></div> </div> </div> <script src="preloader.js"></script> <div class="contact-section"> <div class="contact-info"> <div><i class="fas fa-map-marker-alt"></i>Str, Avram Iancu nr16. Ors, Cernavoda. jud. CT</div> <div><i class="fas fa-envelope"></i>bogdan.constantin0110@gmail.com</div> <div><i class="fas fa-phone"></i>+40769881692</div> <div><i class="fas fa-university"></i>Universitatea Tehnica Gheorghe Asachi</div> </div> <div class="contact-form"> <h2>Contacteaza-ma</h2> <div id="error_message"></div> <form class="contact" onsubmit=" return validation()" method="post"> <input type="text" name="name" class="text-box" id="name" placeholder="Nume complet"> <input type="email" name="email" class="text-box" id="email" placeholder="Email"> <textarea name="message" id="message" rows="5" placeholder="Mesajul tau"></textarea> <input type="submit" class="send-btn" value="Trimite"> </form> </div> </div> </div> </body> </html>

Answer 2

You are taking a long approach, try this:

Add this <div id="preloader"></div> anywhere inside your body tag

---

Add this css:

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #00579f;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

#search-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
}

#search-preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 4px solid #f2f2f2;
  border-top: 4px solid #00579f;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

---

And the last thing add this javascript:

window.onload = function () {
  document.querySelector("#preloader").style.display = "none";
};

---

Codepen: https://codepen.io/manaskhandelwal1/pen/WNGgQJV