<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>AngularJs Loader - codekraft studio</title>
<meta name="author" content="codekraft-studio">
<meta name="description" content="Expect us, we are coming, the new full qualified web developers duo.">
<meta name="Robots" content="ALL,INDEX">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta property="og:title" content="CodeKraft, cutting edge programming!" />
<meta property="og:description" content="Expect us, we are coming, the new full qualified web developers duo" />
<meta property="og:image" content="http://core.codekraft.it/www.codekraft.it/quadkode.jpg" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.codekraft.it/" />
<meta property="og:site_name" content="CodeKraft, cutting edge programming!" />
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="dist/angular-page-loader.css" media="screen" title="no title" charset="utf-8">
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-cloak>
<page-loader flag="isLoading"></page-loader>
<article role="main">
<header>
<div class="hcont">
<h1>angular-page-loader</h1>
<h2>quick integration for your favourite loaders</h2>
</div>
<a href="https://github.com/codekraft-studio/angular-page-loader"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
</header>
<section>
<h2>Very simple to use and very effective!</h2>
<p>
A simple module that can integrate your favorite loader in any AngularJs app.
<br>You can use your favourite loaders in a second with <i>many customizations</i>!
</p>
<p>
The <b>page-loader</b> directive will show any loader during the route change
<br>only if the route takes more than the default time (which is <b>250ms</b>) to load.
<br>This default ime is customizable with the <b>latency</b> attribute.
</p>
<div class="guide">
<h3>
<a href="./example/default">
It works with <strong>ngRoute</strong>
</a>
</h3>
<p>
The module will work out of the box with the Angular Route module (ngRoute).
</p>
</div>
<div class="guide">
<h3>
<a href="./example/ui-router">
It works with <strong>ui.router</strong>
</a>
</h3>
<p>
And it will work out of the box, also for the ui.router module.
</p>
</div>
</section>
</article>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
<script type="text/javascript" src="dist/angular-page-loader.min.js"></script>
<script>
angular.module('app', [
'angular-page-loader'
]);
angular.module('app')
.run(function($timeout, $rootScope) {
$timeout(function() {
$rootScope.isLoading = false;
}, 3000);
})
</script>
</html>