This repository has been archived by the owner on Feb 2, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
121 lines (91 loc) · 4.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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>
<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">
<div class="loader-example">
<page-loader bg-color="transparent" flag="isLoading"></page-loader>
</div>
<h3>
<a href="./example/default">
It works alone with a <b>flag</b>.
</a>
</h3>
<p>You just have to turn <a href="#" ng-click="isLoading = true">ON</a> (true) and <a href="#" ng-click="isLoading = false">OFF</a> (false) the flag variable.</p>
</div>
<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) {
// Use a root scope flag to access everywhere in your app
$rootScope.isLoading = true;
});
</script>
</html>