Hi i have two html files Preloader.html (which is my preloader) index.html (which is my mainpage/homepage) now my problem is that when i load my site from preloader.html then it works perfectly like first it shows the preloader for 5.5 seconds then open the index.html .. but even in this case if i reload the site in index.html it doesn't load preloader.html
But when i open my site from index.html .. preloader.html is not showing up and it direclty opens index.html only.. So i just want to ask you guys that how can i load this preloader.html for 5 second even i click index.html
In simple word i just want to load this preloader.html for like 5.5 seconds then load index.html .. even if i reload the side it should do same .. how can it be done ? Here is my
Preloader.html
<html>
<head>
<title>Expense Tracker</title>
<link rel="stylesheet" type="text/css" href="preload.css">
</head>
<body>
<svg width="910" height="120" id="Layer_1" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M62.8,63.8H28.7v31.6h38v9.5H17.4V17.3h47.3v9.5h-36v27.7h34.1V63.8z" stroke="white" stroke-width="5"/>
<path d="M86.3,42l9,13.5c2.3,3.5,4.3,6.8,6.4,10.3h0.4c2.1-3.8,4.2-7,6.2-10.4l8.8-13.4h12.4L108,72.4l22.1,32.5h-13
l-9.2-14.2c-2.5-3.6-4.6-7.2-6.8-10.9h-0.3c-2.1,3.8-4.3,7.1-6.6,10.9l-9.1,14.2H72.5l22.4-32.1L73.5,42H86.3z"stroke="white" stroke-width="5"/>
<path d="M141.1,62.5c0-8.1-0.3-14.6-0.5-20.5h10.3l0.5,10.8h0.3c4.7-7.7,12.1-12.2,22.4-12.2c15.2,0,26.7,12.9,26.7,32
c0,22.6-13.8,33.8-28.6,33.8c-8.3,0-15.6-3.6-19.4-9.9h-0.3v34.2h-11.3V62.5z M152.4,79.3c0,1.7,0.3,3.3,0.5,4.7
c2.1,7.9,9,13.4,17.2,13.4c12.1,0,19.1-9.9,19.1-24.3c0-12.6-6.6-23.4-18.7-23.4c-7.8,0-15.1,5.6-17.3,14.2
c-0.4,1.4-0.8,3.1-0.8,4.7V79.3z" stroke="white" stroke-width="5"/>
<path d="M221.5,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H221.5z M255,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H255z" stroke="white" stroke-width="5" />
<path d="M280.2,59c0-6.5-0.1-11.8-0.5-17h10.1l0.7,10.4h0.3c3.1-6,10.4-11.8,20.8-11.8c8.7,0,22.2,5.2,22.2,26.8v37.6
h-11.4V68.6c0-10.1-3.8-18.6-14.6-18.6c-7.5,0-13.4,5.3-15.3,11.7c-0.5,1.4-0.8,3.4-0.8,5.3v37.8h-11.4V59z"stroke="white" stroke-width="5"/>
<path d="M350.8,93.2c3.4,2.2,9.4,4.6,15.1,4.6c8.3,0,12.2-4.2,12.2-9.4c0-5.5-3.3-8.5-11.7-11.6
c-11.3-4-16.6-10.3-16.6-17.8c0-10.1,8.2-18.5,21.7-18.5c6.4,0,12,1.8,15.5,3.9l-2.9,8.3c-2.5-1.6-7-3.6-12.9-3.6
c-6.8,0-10.5,3.9-10.5,8.6c0,5.2,3.8,7.5,12,10.7c10.9,4.2,16.5,9.6,16.5,19c0,11.1-8.6,18.9-23.5,18.9c-6.9,0-13.3-1.7-17.7-4.3
L350.8,93.2z"stroke="white" stroke-width="5"/>
<path d="M410.2,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H410.2z M443.8,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H443.8z"stroke="white" stroke-width="5"/>
<path d="M508.3,26.9h-26.7v-9.6h64.9v9.6h-26.8v78h-11.4V26.9z"stroke="white" stroke-width="5"/>
<path d="M550,61.6c0-7.4-0.1-13.8-0.5-19.6h10l0.4,12.4h0.5c2.9-8.5,9.8-13.8,17.4-13.8c1.3,0,2.2,0.1,3.3,0.4v10.8
c-1.2-0.3-2.3-0.4-3.9-0.4c-8.1,0-13.8,6.1-15.3,14.7c-0.3,1.6-0.5,3.4-0.5,5.3v33.5H550V61.6z"stroke="white" stroke-width="5"/>
<path d="M626.7,104.9l-0.9-7.9h-0.4c-3.5,4.9-10.3,9.4-19.2,9.4c-12.7,0-19.2-9-19.2-18.1c0-15.2,13.5-23.5,37.8-23.4
v-1.3c0-5.2-1.4-14.6-14.3-14.6c-5.9,0-12,1.8-16.4,4.7l-2.6-7.5c5.2-3.4,12.7-5.6,20.7-5.6c19.2,0,23.9,13.1,23.9,25.7v23.5
c0,5.5,0.3,10.8,1,15.1H626.7z M625,72.8c-12.5-0.3-26.7,2-26.7,14.2c0,7.4,4.9,10.9,10.8,10.9c8.2,0,13.4-5.2,15.2-10.5
c0.4-1.2,0.7-2.5,0.7-3.6V72.8z"stroke="white" stroke-width="5"/>
<path d="M699.4,102.6c-3,1.6-9.6,3.6-18.1,3.6c-19,0-31.3-12.9-31.3-32.1c0-19.4,13.3-33.4,33.8-33.4
c6.8,0,12.7,1.7,15.9,3.3l-2.6,8.8c-2.7-1.6-7-3-13.3-3c-14.4,0-22.2,10.7-22.2,23.8c0,14.6,9.4,23.5,21.8,23.5
c6.5,0,10.8-1.7,14-3.1L699.4,102.6z"stroke="white" stroke-width="5"/>
<path d="M724.1,70.8h0.3c1.6-2.2,3.8-4.9,5.6-7.2L748.4,42h13.8l-24.3,25.9l27.7,37.1h-13.9l-21.7-30.2l-5.9,6.5v23.7
h-11.3V12.6h11.3V70.8z"stroke="white" stroke-width="5"/>
<path d="M780.1,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H780.1z M813.6,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H813.6z"stroke="white" stroke-width="5"/>
<path d="M838.8,61.6c0-7.4-0.1-13.8-0.5-19.6h10l0.4,12.4h0.5c2.9-8.5,9.8-13.8,17.4-13.8c1.3,0,2.2,0.1,3.3,0.4v10.8
c-1.2-0.3-2.3-0.4-3.9-0.4c-8.1,0-13.8,6.1-15.3,14.7c-0.3,1.6-0.5,3.4-0.5,5.3v33.5h-11.3V61.6z"stroke="white" stroke-width="5"/>
</svg>
</body>
<script>
setTimeout(function(){
window.location.href = 'index.html';
}, 6500);
</script>
<script type="text/javascript" src="app.js"></script>
</html
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Expense Tracker</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<style>
.button1 {
color: black;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<div >
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left"
d="M26.667 10.667q1.104 0 1.885 0.781t0.781 1.885q0 1.125-0.792 1.896l-14.104 14.104h41.563q1.104 0 1.885 0.781t0.781 1.885-0.781 1.885-1.885 0.781h-41.563l14.104 14.104q0.792 0.771 0.792 1.896 0 1.104-0.781 1.885t-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.813-0.771-1.896t0.771-1.896l18.667-18.667q0.792-0.771 1.896-0.771z">
</path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right"
d="M37.333 10.667q1.125 0 1.896 0.771l18.667 18.667q0.771 0.771 0.771 1.896t-0.771 1.896l-18.667 18.667q-0.771 0.771-1.896 0.771-1.146 0-1.906-0.76t-0.76-1.906q0-1.125 0.771-1.896l14.125-14.104h-41.563q-1.104 0-1.885-0.781t-0.781-1.885 0.781-1.885 1.885-0.781h41.563l-14.125-14.104q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76z">
</path>
</svg>
</div>
<!-- MAIN CONTENT -->
<div >
<!-- HEADER -->
<section id="header">
<!-- NAVIGATION -->
<nav >
<div >
<div >
<button type="button" data-toggle="collapse" data-target="#menu">
<span >Toggle navigation</span>
<span ></span>
<span ></span>
<span ></span>
</button>
<a href="#header">Expense Tracker</a>
</div>
<!-- /.navbar-header -->
<div id="menu">
<ul >
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
<li><a button type="button" href="#info">Login/Signup</button></a>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
<!-- SLIDER -->
<div >
<section>
<div id="loader" data-opening="M 0,0 0,60 80,60 80,0 z M 80,0 40,30 0,60 40,30 z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60"
preserveAspectRatio="none">
<path d="M 0,0 0,60 80,60 80,0 Z M 80,0 80,60 0,60 0,0 Z" />
</svg>
</div> <!-- /.pageload-overlay -->
<div >
<div >
<div >
<div >
<div >
<div >
<h1>Expense Tracker</h1>
<p>Manage your money to get out of debt</p>
</div>
</div>
</div>
</div>
</div>
</div>
<nav >
<a href="#prev">
<span >
<svg width="32" height="32" viewBox="0 0 64 64">
<use xlink:href="#arrow-left">
</svg>
</span>
</a>
<a href="#next">
<span >
<svg width="32" height="32" viewBox="0 0 64 64">
<use xlink:href="#arrow-right">
</svg>
</span>
</a>
</nav>
</section>
<script type="text/javascript">
var dataHeader = [
{
bigImage: "images/budget1.png",
},
{
bigImage: "images/budget2.jpg",
},
{
bigImage: "images/income1.png",
}
],
loaderSVG = new SVGLoader(document.getElementById('loader'), { speedIn: 500, speedOut: 500, easingIn: mina.easeinout });
loaderSVG.show()
</script>
</div>
<!-- /.header-slide -->
</section>
<!-- HEADER END -->
<!-- ABOUT -->
<section id="about" >
<header >
<h2>About <span>Us</span></h2>
<p>
Budget your finances to know where your money is going. BudgetTracker is a complete online money management tool designed to keep track of all your expenses and incomes from your computer, mobile phone, or iPad. <br> Use
<strong style="color: red;">Expense Tracker</strong> to track your daily expenses and income.
</p>
</header>
<div >
<div >
<div >
<div >
<div style="background-image:url(images/1.png)"></div>
</div>
</div>
<div >
<div >
<div data-animate="fadeInLeft">
<div ><i ></i></div>
<div >
<h4>Clean Code</h4>
<p>CLean code.. Add text</p>
</div>
</div>
<div data-animate="fadeInLeft">
<div ><i ></i></div>
<div >
<h4>Fully Responsive Website</h4>
<p>fully responsive web.. Add text</p>
</div>
</div>
<div data-animate="fadeInLeft">
<div ><i ></i></div>
<div >
<h4>expense management system</h4>
<p>expense management system.. Add text</p>
</div>
</div>
</div>
</div>
</div> <!-- /.row table-row -->
</div> <!-- /.container -->
</section>
<!-- TEAM -->
<section id="team" >
<header >
<h2><span>Meet The Team</span></h2>
<p>The pynoneers
.. Add text
</p>
</header>
<div >
<div >
<div >
<div data-animate="fadeInDown">
<div >
<img src="images/team/team-1.png" alt="" >
</div>
<h3>sk</h3>
<h5>fullstack</h5>
<p>WAKANDA FOREVER</p>
<div >
<ul >
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
</ul>
</div>
</div>
</div>
<div >
<div data-animate="fadeInDown">
<div >
<img src="images/team/team_2.png" alt="" >
</div>
<h3>friend</h3>
<h5>Designer</h5>
<p>WAKANDA FOREVER</p>
<div >
<ul >
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
</ul>
</div>
</div>
</div>
<div >
<div data-animate="fadeInDown">
<div >
<img src="images/team/team_3.png" alt="" >
</div>
<h3>friend</h3>
<h5>fnd</h5>
<p>WAKANDA FOREVER</p>
<div >
<ul >
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
</ul>
</div>
</div>
</div>
<div >
<div data-animate="fadeInDown">
<div >
<img src="images/team/team_4.png" alt="" >
</div>
<h3>kdasr</h3>
<h5>asgwr</h5>
<p>WAKANDA FOREVER</p>
<div >
<ul >
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /.container -->
</section>
<!-- FOOTER CONTACT -->
<section id="contact" >
<header >
<h2>Contact <span>Us</span></h2>
<p>if you have any query fell free to contac us.</p>
</header>
<div >
<div >
<div data-animate="fadeInLeft">
<form action="#">
<div >
<div >
<input type="text" placeholder="Your Name">
</div>
<div >
<input type="email" placeholder="Your Email">
</div>
<div >
<textarea rows="3" placeholder="Tell Us Everything"></textarea>
</div>
<div >
<button >Send Message</button>
</div>
</div>
</form>
</div>
<div data-animate="fadeInRight">
<address>
<span><i ></i>kathmandu,nepal </span>
<span><i ></i> 1235125125125</span>
<span><i ></i> <a
href="mailto:[email protected]">d1231@gmail.com</a></span>
</address>
</div>
</div>
</div>
</section>
<section id="footer">
<div >
<div >
<div >
<p>Expense tracker</p>
<p><small><a href="#">expense footer</a></small></p>
</div>
</div>
</div>
</section>
</div><!-- /.container-fluid -->
<!-- SCRIPT -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Thanks a lot for taking of your time to help me!
CodePudding user response：
Using an iframe you can achieve this. However, now a days we prefer direct images also known as busy cursors to let the user know that some processing is happening or wait for some time.
So basically the iframe will have your loader and it will show for defined period and then it will be hidden and then the main page content will be displayed. Below is the code for index.html.
<html>
<head>
<title>Expense Tracker</title>
</head>
<body>
<iframe id="loader" src="loader.html" style="width:100%; height:100%; border:0px" ></iframe>
<div id="mainContent" style="display:none"> Main Content goes here. </div>
<script>
setTimeout(function(){
document.getElementById('loader').style.display='none';
document.getElementById('mainContent').style.display='block';
}, 3000);
</script>
</body>
</html>