Repository: 9elements/loadie.js
Branch: master
Commit: bce48253eec8
Files: 10
Total size: 7.6 KB

Directory structure:
gitextract_veyou16p/

├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── css/
│   ├── .sass-cache/
│   │   └── e695daaca6de778cf5ac49154d92358a4d33b6a7/
│   │       └── main.sassc
│   ├── loadie.css
│   ├── main.css
│   └── main.sass
├── index.html
└── js/
    └── jquery.loadie.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2013 Dominik Schmidt

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

================================================
FILE: README.md
================================================
## **Loadie.js** is a lightweight jQuery plugin to create a preloader that doesn't suck and that is used by big firms.

### 1. How to include Loadie.js

If you haven't already, include jQuery and the latest Loadie.js Script on the AJAX-driven page.

    <script src="http://code.jquery.com/jquery-latest.min.js">
    <script src="js/jquery.loadie.min.js">

### 2. How to initialize Loadie.js

Just put in the following jQuery code in your page to initialize Loadie.js.

    $('body').loadie(); // Change the wrapper if wanted.

### 3. How to update Loadie.js

If you haven't already, include jQuery and the latest Loadie.js Script on the AJAX-driven page.

    var percent = 0.74;
    $('body').loadie(percent); // Insert your percent as params.

### 4. Update your CSS files

If you are running a web page with a fixed header or something fixed or positioned absolute on the top, your loadie will not be visible, because there is something that is called z-index.

    .loadie { z-index: 9999; }

Insert this little snippet into your css file and everything should work fine.

## **Options**

At this moment Loadie.js (v1.0) doesn't support extensive options. If you have any ideas what Loadie.js could be, just leave us an issue at Github.

## Copyright

This nice little jQuery plugin was crafted by [@iDuuck](http://twitter.com/iDuuck) of [9elements](http://9elements.com).


================================================
FILE: bower.json
================================================
{
  "name": "loadie.js",
  "version": "0.0.0",
  "homepage": "https://github.com/9elements/loadie.js",
  "description": "Loadie.js is a lightweight jQuery plugin to create a preloader that doesn't suck and that is used by big firms.",
  "main": [
    "./css/loadie.css",
    "./js/jquery.loadie.js"
  ],
  "keywords": [
    "preloader",
    "lightweight",
    "loading",
    "load"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}


================================================
FILE: css/loadie.css
================================================
.loadie {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	width: 0;
	height: 4px;
	-webkit-transition: width 0.5s ease-out;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.25);
}

================================================
FILE: css/main.css
================================================
body{display:table;width:100%;margin:0;padding:100px 0px;color:#a92a00;background:#ff7d52;-webkit-font-smoothing:antialiased;font:18px/20px "Helvetica Neue",Helvetica,Arial,Sans-serif}h1,h2,h3,h4,h5,h6{font-weight:normal}a{color:#fff;text-shadow:0px 1px 0px rgba(0,0,0,0.15);text-decoration:none}.button{padding:10px 20px;border:3px solid #fff}.container{width:720px;margin:0 auto;text-align:left}.container h2{font-size:36px;line-height:50px;font-weight:200}.container h2 b{font-weight:700;color:#fff;text-shadow:0px 1px 0px rgba(0,0,0,0.15)}.container h3{font-weight:600;color:#fff;text-shadow:0px 1px 0px rgba(0,0,0,0.15);margin-top:50px;font-size:24px}.container p{font-size:20px;line-height:36px}.container code{display:block;padding:15px 20px;background:#d24e23;font-family:"Ubuntu Mono";color:#fff;line-height:30px;text-shadow:0px 1px 0px rgba(0,0,0,0.25);border-radius:4px;box-shadow:inset 0px 1px 2px rgba(0,0,0,0.15),0px 1px 0px rgba(255,255,255,0.15)}.container code span{opacity:0.75}


================================================
FILE: css/main.sass
================================================
$color : #ff7243

body
	display: table
	width: 100%
	margin: 0
	padding: 100px 0px
	color: darken($color, 30)
	background: lighten($color, 3)
	-webkit-font-smoothing: antialiased
	font: 18px/20px "Helvetica Neue", Helvetica, Arial, Sans-serif

h1, h2, h3, h4, h5, h6
	font-weight: normal
a
	color: white
	text-shadow: 0px 1px 0px rgba(0,0,0,0.15)
	text-decoration: none

.button
	padding: 10px 20px
	border: 3px solid white

.container
	width: 720px
	margin: 0 auto
	text-align: left

	h2
		font-size: 36px
		line-height: 50px
		font-weight: 200

		b
			font-weight: 700
			color: white
			text-shadow: 0px 1px 0px rgba(0,0,0,0.15)

	h3
		font-weight: 600
		color: white
		text-shadow: 0px 1px 0px rgba(0,0,0,0.15)
		margin-top: 50px
		font-size: 24px

	p
		font-size: 20px
		line-height: 36px

	code
		display: block
		padding: 15px 20px
		// background: darken($color, 20)
		background: darken(#dd5c31, 5)
		font-family: "Ubuntu Mono"
		color: white
		line-height: 30px
		text-shadow: 0px 1px 0px rgba(0,0,0,0.25)
		border-radius: 4px
		box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15), 0px 1px 0px rgba(255,255,255,0.15)
		span
			opacity: 0.75

================================================
FILE: index.html
================================================
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Loadie - Example Page</title>

	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.loadie.js"></script>
	<link rel="stylesheet" href="css/loadie.css">
	<style>body{margin:0px}</style>
</head>
<body>
	<a href="https://github.com/9elements/loadie.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

	<img src="img/1.jpg" class="loaded-image" alt="">
	<img src="img/2.jpg" class="loaded-image" alt="">
	<img src="img/3.jpg" class="loaded-image" alt="">

	<script>
	$(function() {
		var totalImages = $(".loaded-image").size();
		var imagesLoaded = 0;
		$('body').loadie();
		$(".loaded-image").bind("load", function(){
      $(this).show();

      imagesLoaded++;
      $('body').loadie(imagesLoaded / totalImages);
    });
	})
	</script>
</body>
</html>

================================================
FILE: js/jquery.loadie.js
================================================
(function( $ ) {
  var Loadie = {};

  /*
   * Generate a unique id for more than one loadie
   */
  Loadie.uid = function() {
    var newDate = new Date;
    return newDate.getTime();
  };

  /*
   * Finishes and fades the loadie out.
   */
  Loadie.finish = function(dom) {
    var loadie = $('#loadie-' + dom.data('loadie-id'), dom);
    loadie.fadeOut(200);
  }

  /*
   * Updates loadie with a float
   *
   * Loadie.update(0.2)
   * Loadie.update(1) // Finishes loadie, too
   */
  Loadie.update = function(dom, percent) {
    var loadie = $('#loadie-' + dom.data('loadie-id'), dom);
    var parentWidth = dom.width();
    loadie.css('width', Math.floor(percent * parentWidth) + "px");
  }

  /*
   * Loadie.js initializer
   */
  Loadie.init = function(dom, percent) {
    var uid = this.uid();
    var loadie = dom.append($('<div id="loadie-' + uid + '" class="loadie"></div>'));
    dom.data('loadie-id', uid);
    dom.css('position', 'relative');
    this.update(dom, percent);
  }

  $.fn.loadie = function(percent, callback) {
    var percent = percent || 0;
    var parent = $(this);

    if(parent.data('loadie-loaded') !== 1) {
      Loadie.init(parent, percent);
    } else {
      Loadie.update(parent, percent);
    }
    if(percent >= 1) {
      setTimeout(function() {
        Loadie.finish(parent);
      }, 200);
    }
    parent.data('loadie-loaded', 1);
    return this;
  };
}( jQuery ))