Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
HELP: How Can I Make An Html Page Load Showing A Gif Image Rotating Before Opening
#1
how do i make an html page load (with a gif image rotating) before opening.
I am a proud member of NIgerian Coders Team
#2
Not clear... You mean something similar to what happens when you check your account balance on your phone?
Always try not to spend tomorrow regretting what you should have done today! Smile
[-] The following 1 user Likes Laive's post:
  • Aaron
Reply
#3
(08-04-2017, 05:40 AM)Laive Wrote:
Not clear... You mean something similar to what happens when you check your account balance on your phone?


Dnt get you, recharge card or Bank account
Reply
#4
This is the kinda topic which my name should be mentioned. Mr @Aaron, here's a solution to your problem.

If you want a pre-loader (gif) to display while your webpage is loading (or we can call it a quick splash screen) here's the few steps using HTML, CSS and JQuery.

1. Get the img you want to us. You can download the one have attached.

2. Add the below div right below the opening <body> tag.

Code:
<div class="loader"></div>


3. Adding some css will be cool

Code:
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}


This ensures that the page loading image is centered on a near white background (change color as desired) and covers the entire screen. The z-index positions the full-screen div on top of all the other elements, hiding them behind it while they load.

4. The final step is to add a link to the jQuery library in the header, as well as a simple jQuery function call. Add this above the closing </head> tag.

Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
})
</script>

This is very important as without this jQuery function, the page loading div would cover the entire page indefinitely. The jQuery function waits until the DOM has completely loaded, then fades the page loader div out of view, showing the contents behind it.

As soon as your browser caches the contents of the DOM, page load times will increase dramatically.

---
https://plaza.ng/wp-content/uploads/wpfo...loader.gif

That's the link to the image gif.

Test and give feedback.
Nothing Is Impossible
[-] The following 2 users Like cheatex's post:
  • Hackinubee, sedenu4u
Reply
#5
(08-04-2017, 05:40 AM)Laive Wrote:
Not clear... You mean something similar to what happens when you check your account balance on your phone?


yah!
I am a proud member of NIgerian Coders Team
Reply
#6
(08-04-2017, 06:13 AM)cheatex Wrote:
This is the kinda topic which my name should be mentioned. Mr @Aaron, here's a solution to your problem.

If you want a pre-loader (gif) to display while your webpage is loading (or we can call it a quick splash screen) here's the few steps using HTML, CSS and JQuery.

1. Get the img you want to us. You can download the one have attached.

2. Add the below div right below the opening <body> tag.

Code:
<div class="loader"></div>


3. Adding some css will be cool

Code:
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}


This ensures that the page loading image is centered on a near white background (change color as desired) and covers the entire screen. The z-index positions the full-screen div on top of all the other elements, hiding them behind it while they load.

4. The final step is to add a link to the jQuery library in the header, as well as a simple jQuery function call. Add this above the closing </head> tag.

Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
})
</script>

This is very important as without this jQuery function, the page loading div would cover the entire page indefinitely. The jQuery function waits until the DOM has completely loaded, then fades the page loader div out of view, showing the contents behind it.

As soon as your browser caches the contents of the DOM, page load times will increase dramatically.

---
https://plaza.ng/wp-content/uploads/wpfo...loader.gif

That's the link to the image gif.

Test and give feedback.


it will show my contents and then make it disappear again....
i inserted my own loading image(.gif) and it's not showing too..
????????
I am a proud member of NIgerian Coders Team
Reply
#7
(08-04-2017, 07:16 AM)Aaron Wrote:
it will show my contents and then make it disappear again....
i inserted my own loading image(.gif) and it's not showing too..
????????


Follow my instructions... Place the code where you should and don't forget the JQuery. Also, replace the image.
Nothing Is Impossible
Reply
#8
(08-04-2017, 07:31 AM)cheatex Wrote:
Follow my instructions... Place the code where you should and don't forget the JQuery. Also, replace the image.


ok,
trying again...
I am a proud member of NIgerian Coders Team
Reply
#9
not working still, this is my code below...



Code:
<!DOCTYPE html>
<html lang="en-us">
<head><title>lab</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
<style>
.container0 {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#add, #post {
border-radius: 0;
}
#status {
border-radius: 0;
width: 200px;
}
#headlogo {
background-color: blue;
padding: 5px;
color: white;
border-radius: 10px;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url("b_loading.gif") 50% 50% no-repeat rgb(249,249,249);
}
</style>
</head>
<body class="container0">
<div class="loader">
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li><a href="#">Add friend</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Menu</a></li>
</ul>

<div class="input-group">
<textarea class="form-control input-lg" id="status" rows="1"  type="text" placeholder="Write something!"></textarea>
<button class="btn btn-default btn-lg" id="add" name="add">+</button>
<button class="btn btn-success btn-lg" id="post" name="post">√</button>
</div>
</div>
</body>
</html>

@cheatex
I am a proud member of NIgerian Coders Team
Reply
#10
(08-04-2017, 09:00 AM)Aaron Wrote:
not working still, this is my code below...



Code:
<!DOCTYPE html>
<html lang="en-us">
<head><title>lab</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
<style>
.container0 {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#add, #post {
border-radius: 0;
}
#status {
border-radius: 0;
width: 200px;
}
#headlogo {
background-color: blue;
padding: 5px;
color: white;
border-radius: 10px;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url("b_loading.gif") 50% 50% no-repeat rgb(249,249,249);
}
</style>
</head>
<body class="container0">
<div class="loader">
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li><a href="#">Add friend</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Menu</a></li>
</ul>

<div class="input-group">
<textarea class="form-control input-lg" id="status" rows="1"  type="text" placeholder="Write something!"></textarea>
<button class="btn btn-default btn-lg" id="add" name="add">+</button>
<button class="btn btn-success btn-lg" id="post" name="post">√</button>
</div>
</div>
</body>
</html>

@cheatex


You added everything in one page? Are you new to coding?
Nothing Is Impossible
Reply
#11
(08-04-2017, 10:16 AM)cheatex Wrote:
You added everything in one page? Are you new to coding?


lol, take it easy on the bad guy
Reply
#12
hahaha, see me sef. ah just dey hurry.... no problem i will fix that then
I am a proud member of NIgerian Coders Team
Reply
#13
Now Working........ http://codedrank.tk
MY WEBSITE ExamRed.Tk
[-] The following 1 user Likes Codedrank's post:
  • Hackinubee
Reply
#14
No problems
Nothing Is Impossible
Reply
#15
(08-04-2017, 07:16 AM)Aaron Wrote:
it will show my contents and then make it disappear again....
i inserted my own loading image(.gif) and it's not showing too..
????????

Simple as abc it should be within the <head> </head>
coding is always simple to them that believe@programming is thinking,typing and usually taught or learnt by examples.  
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  How To Make Your Telephone Number Hidden When You Call Someone Samuel04 1 110 05-16-2018, 12:07 PM
Last Post: Kerrlaxon
  FUN: Nct: Ultimate Html Challenge By Abcheats (1) abcheats 25 381 01-01-2018, 05:07 PM
Last Post: jonath45
  How To Create Any Flag With Pure Html And Css abcheats 14 553 12-28-2017, 04:33 PM
Last Post: Dynamo
  TUTORIAL: How To Make The Naira Symbol In Html Hapzy 3 192 11-27-2017, 08:45 AM
Last Post: Lee Palmer
  Free Html Tutorials For Beginners 2017 abcheats 2 103 11-22-2017, 04:43 PM
Last Post: abcheats
  HELP: Html Site Page Sammyguy 4 136 10-14-2017, 03:44 PM
Last Post: Sammyguy
  SHARED: Autoscreen Shot, Screenshot Your Site Home Page Here » tennytwins 0 100 09-28-2017, 09:21 PM
Last Post: tennytwins
  HELP: How To Make Short Title Of Thread Long In Mybb flexible 2 68 07-28-2017, 08:46 AM
Last Post: flexible
  HELP: How Can I Make Like This Breadcumbs Navigation In Mybb flexible 8 213 07-27-2017, 06:42 AM
Last Post: flexible
  HELP: How Can I Make My Prefix Work Cyberclint 13 234 07-13-2017, 12:25 PM
Last Post: Cyberclint



Users browsing this thread: 1 Guest(s)

About Nigeria's Creative Talents

Nigeria's Creative Talents is an online community where every creative Nigerians can share ideas with themselves.

For any more information, please use our contact form.

              User Links

              Advertise