Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Niklaus Gerber
committed
Oct 27, 2011
1 parent
643234a
commit 2af3366
Showing
5 changed files
with
158 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
# PreLoadMe, a leightweight jQuery website preloader | ||
PreLoadMe is a leightweight preloader for any webcontent. Powered by jQuery and CSS it is fully responsive and will run on all modern desktop- and mobile browsers with no additionals plugins. PreLoadMe displays a loading animation until the browser fetched the whole webcontent and will fade out the moment the page has been completely chached. Because the simplicity of PreLoadMe, it can be easily customized and adapted to your needs. | ||
|
||
## How it works? | ||
PreLoadMe needs following Components to work: | ||
|
||
### jQuery | ||
You need jQuery to run PreLoadMe. Add this code before the `</body>` tag. | ||
|
||
<!-- jQuery Plugin --> | ||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> | ||
|
||
### jQuery Snippet | ||
Place the following JavaScript code right before the `</body>` tag. | ||
|
||
<!-- Preloader --> | ||
<script type="text/javascript"> | ||
//<![CDATA[ | ||
$(window).load(function() { // makes sure the whole site is loaded | ||
$("#status").fadeOut(); // will first fade out the loading animation | ||
$("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website. | ||
}) | ||
//]]> | ||
</script> | ||
|
||
### CSS | ||
Make sure you include the following CSS code on your website. | ||
|
||
/* Preloader */ | ||
#preloader { | ||
position:absolute; | ||
top:0; | ||
left:0; | ||
right:0; | ||
bottom:0; | ||
background-color:#fff; /* change if the mask should have another color then white */ | ||
z-index:99; /* makes sure it stays on top */ | ||
} | ||
|
||
#status { | ||
width:200px; | ||
height:200px; | ||
position:absolute; | ||
left:50%; /* centers the loading animation horizontally one the screen */ | ||
top:50%; /* centers the loading animation vertically one the screen */ | ||
background-image:url(../img/status.gif); /* path to your loading animation */ | ||
background-repeat:no-repeat; | ||
background-position:center; | ||
margin:-100px 0 0 -100px; /* is width and height divided by two */ | ||
} | ||
|
||
### HTML | ||
Place following HTML Code directly after the `<body>` tag. | ||
|
||
<!-- Preloader --> | ||
<div id="preloader"> | ||
<div id="status"> </div> | ||
</div> | ||
|
||
The outer DIV `preloader` will be called from the CSS file and will cover the entire website with a white DIV. | ||
The inner DIV `status` will show the loading animation. | ||
|
||
### Image | ||
The image `status.gif` is will be displayed in the DIV `status` and is located at `/img/status.gif`�. | ||
|
||
The source package contains all relevant files and a working demonstration. | ||
|
||
## Disclaimers | ||
|
||
### Credits | ||
Please suppert humans.txt (http://humanstxt.org/). It's an initiative for knowing the people behind a website. It's a TXT file that contains information about the different people who have contributed to building the website. | ||
|
||
PreLoadMe: https://github.com/niklausgerber/PreLoadMe | ||
Niklaus Gerber | ||
Twitter: @niklausgerber | ||
URL: www.gerbers.ch | ||
Location: Bern, Switzerland | ||
|
||
### Licences | ||
PreLoadMe by Niklaus Gerber is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. | ||
Based on a work at github.com. | ||
|
||
### Download, Fork, Commit. | ||
If you think you can make this better, please Download, Fork, & Commit. We'd love your see your ideas. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
@charset "utf-8"; | ||
|
||
/* Preloader */ | ||
#preloader { | ||
position:absolute; | ||
top:0; | ||
left:0; | ||
right:0; | ||
bottom:0; | ||
background-color:#fff; /* change if the mask should have another color then white */ | ||
z-index:99; /* makes sure it stays on top */ | ||
} | ||
|
||
#status { | ||
width:200px; | ||
height:200px; | ||
position:absolute; | ||
left:50%; /* centers the loading animation horizontally one the screen */ | ||
top:50%; /* centers the loading animation vertically one the screen */ | ||
background-image:url(../img/status.gif); /* path to your loading animation */ | ||
background-repeat:no-repeat; | ||
background-position:center; | ||
margin:-100px 0 0 -100px; /* is width and height divided by two */ | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
/* TEAM */ | ||
|
||
/* THANKS */ | ||
PreLoadMe: https://github.com/niklausgerber/PreLoadMe | ||
Niklaus Gerber | ||
Twitter: @niklausgerber | ||
URL: www.gerbers.ch | ||
Location: Bern, Switzerland | ||
|
||
/* SITE */ | ||
|
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
|
||
<head> | ||
<meta charset="utf-8"/> | ||
<title>PreLoadMe</title> | ||
|
||
<!-- Please support http://humanstxt.org/ --> | ||
<link type="text/plain" rel="author" href="http://www.gerbers.ch/humans.txt"/> | ||
|
||
<!-- Stylesheet --> | ||
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen, print"/> | ||
|
||
</head> | ||
|
||
<body> | ||
<!-- Preloader --> | ||
<div id="preloader"> | ||
<div id="status"> </div> | ||
</div> | ||
|
||
<!-- Your Website Content --> | ||
<div>This is your website content</div> | ||
|
||
<!-- jQuery Plugin --> | ||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> | ||
|
||
<!-- Preloader --> | ||
<script type="text/javascript"> | ||
//<![CDATA[ | ||
$(window).load(function() { // makes sure the whole site is loaded | ||
$("#status").fadeOut(); // will first fade out the loading animation | ||
$("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website. | ||
}) | ||
//]]> | ||
</script> | ||
|
||
</body> | ||
</html> |