Coder Social home page Coder Social logo

benjamin0mar / preloadme Goto Github PK

View Code? Open in Web Editor NEW

This project forked from niklausgerber/preloadme

0.0 2.0 0.0 16 KB

PreLoadMe, a lightweight jQuery website preloader.

Home Page: https://www.niklausgerber.com

License: MIT License

CSS 56.49% HTML 43.51%

preloadme's Introduction

PreLoadMe, a lightweight jQuery website preloader

PreLoadMe is a lightweight 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.

PreLoadMe displays a loading animation until the browser fetched the whole web content and will fade out the moment the page has been completely cached. Because the simplicity of PreLoadMe, it can be easily customized and adapted to your needs.

You can see a live preview here: PreLoadMe Live Preview

Implementation

PreLoadMe is jQuery driven. You will need to implement an up to date jQuery version and the corresponding JavaScript for executing the preloader. Add the following code right before the </body> tag.

<!-- jQuery Plugin -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<!-- Preloader -->
<script type="text/javascript">
    //<![CDATA[
        $(window).on('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. 
            $('body').delay(350).css({'overflow':'visible'});
          })
    //]]>
</script>

The CSS-Markup will help you style the preloader. Make sure to include it on your website.

body {
	overflow: hidden;
}

/* Preloader */
#preloader {
	position: fixed;
	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 */
}

Finally place the following HTML Code directly after the <body> tag.

<!-- Preloader -->
<div id="preloader">
	<div id="status">&nbsp;</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. Also you should not forget to give your document a proper doctype. Otherwise the preloader might not work.

Using with AJAX requests

If you want to show preloader during AJAX request you can use the following CSS code.

#preloader {
	position:fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;		
	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 */
}			

Your Javascript code will look like:

$("#status").fadeIn();
$("#preloader").fadeIn();
$.get(url, data, function(){
	$("#status").fadeOut();
	$("#preloader").fadeOut();
});

The source package contains all relevant files and a working demonstration.

Credits

Please support 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: https://www.niklausgerber.com
Location: Zürich, Switzerland

Download, Fork, Commit.

If you think you can make this better, please Download, Fork, & Commit. I'd love to see your ideas.

Donation

I love to create and I won't ask for repayment. If you appreciate my work and would like to support me I am sure you will earn some extra Karma points. Please donate.

preloadme's People

Contributors

niklausgerber avatar ledovsky avatar jonmunson avatar

Watchers

James Cloos avatar Omar Benjamin avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.