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 class="st0" 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 class="svg-wrap">
<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 class="container-fluid">
<!-- HEADER -->
<section id="header">
<!-- NAVIGATION -->
<nav class="navbar navbar-fixed-top navbar-default bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#header">Expense Tracker</a>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<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" class="button button1" href="#info">Login/Signup</button></a>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
<!-- SLIDER -->
<div class="header-slide">
<section>
<div id="loader" class="pageload-overlay" 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 class="image-slide bg-fixed">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="slider-content">
<h1>Expense Tracker</h1>
<p>Manage your money to get out of debt</p>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="nav-slide">
<a class="prev" href="#prev">
<span class="icon-wrap">
<svg class="icon" width="32" height="32" viewBox="0 0 64 64">
<use xlink:href="#arrow-left">
</svg>
</span>
</a>
<a class="next" href="#next">
<span class="icon-wrap">
<svg class="icon" 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" class="light">
<header class="title">
<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 class="container">
<div class="row table-row">
<div class="col-sm-6 hidden-xs">
<div class="section-content">
<div class="big-image" style="background-image:url(images/1.png)"></div>
</div>
</div>
<div class="col-sm-6">
<div class="section-content">
<div class="about-content left animated" data-animate="fadeInLeft">
<div class="about-icon"><i class="fa fa-code"></i></div>
<div class="about-detail">
<h4>Clean Code</h4>
<p>CLean code.. Add text</p>
</div>
</div>
<div class="about-content left animated" data-animate="fadeInLeft">
<div class="about-icon"><i class="fa fa-desktop"></i></div>
<div class="about-detail">
<h4>Fully Responsive Website</h4>
<p>fully responsive web.. Add text</p>
</div>
</div>
<div class="about-content left animated" data-animate="fadeInLeft">
<div class="about-icon"><i class="fa fa-cube"></i></div>
<div class="about-detail">
<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" class="light">
<header class="title">
<h2><span>Meet The Team</span></h2>
<p>The pynoneers
.. Add text
</p>
</header>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team-1.png" alt="" class="img-circle">
</div>
<h3>sk</h3>
<h5>fullstack</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team_2.png" alt="" class="img-circle">
</div>
<h3>friend</h3>
<h5>Designer</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team_3.png" alt="" class="img-circle">
</div>
<h3>friend</h3>
<h5>fnd</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team_4.png" alt="" class="img-circle">
</div>
<h3>kdasr</h3>
<h5>asgwr</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /.container -->
</section>
<!-- FOOTER CONTACT -->
<section id="contact" class="dark">
<header class="title">
<h2>Contact <span>Us</span></h2>
<p>if you have any query fell free to contac us.</p>
</header>
<div class="container">
<div class="row">
<div class="col-md-8 animated" data-animate="fadeInLeft">
<form action="#">
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Your Name">
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="Your Email">
</div>
<div class="col-md-12">
<textarea class="form-control" rows="3" placeholder="Tell Us Everything"></textarea>
</div>
<div class="col-md-12">
<button class="btn btn-default submit">Send Message</button>
</div>
</div>
</form>
</div>
<div class="col-md-4 animated" data-animate="fadeInRight">
<address>
<span><i class="fa fa-map-marker fa-lg"></i>kathmandu,nepal </span>
<span><i class="fa fa-phone fa-lg"></i>+1235125125125</span>
<span><i class="fa fa-envelope-o fa-lg"></i> <a
href="mailto:duttabiswajit441@gmail.com">d1231@gmail.com</a></span>
</address>
</div>
</div>
</div>
</section>
<section id="footer">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<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!
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>