預加載器 javascript + css + html

Question

我想在我的網站上添加一個預加載器，但是當我添加它時，我希望在我重新加載頁面時先顯示預加載器，然后再顯示我的頁面。 我可以添加或更改什么？ 有我的完整代碼。 （對不起，我的英語不好）。 我希望你明白我的意思，你可以嘗試解決我的問題並給我任何建議。

 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

在您的代碼中，預加載器沒有背景並且不會填滿整個屏幕

解決方案：給預加載器一個背景並將其拉伸到整個屏幕上！

在 100% 時，使用loadingscreen.style.display = "none";

請參閱下面的代碼。

 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

你正在采取長期的方法，試試這個：

將此<div id="preloader"></div>添加到您的 body 標簽內的任何位置

---

添加這個 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);
  }
}

---

最后添加這個 javascript：

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

---

代碼筆： https://codepen.io/manaskhandelwal1/pen/WNGgQJV