ngactivityindicator
Version:
Simple Angular.js preloaders provider
221 lines (188 loc) • 5.18 kB
HTML
<html ng-app="exampleApp">
<head>
<meta charset="utf-8">
<title>ngActivityIndicator</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/ngActivityIndicator.css">
<style>
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
::selection {
background-color: #aa4f80;
color: #fff;
}
::-moz-selection {
background-color: #aa4f80;
color: #fff;
}
::selection {
background-color: #e74c3c;
color: #fff;
}
::-moz-selection {
background-color: #e74c3c;
color: #fff;
}
.clearfix {
display: block;
}
.clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
body {
background: #f54;
color: #fff;
font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
overflow-x: hidden;
}
h1 {
color: #fff;
font-size: 3em;
font-family: 'Montserrat', 'Helvetica Neue', 'Arial', sans-serif;
font-weight: 700;
text-align: center;
padding-top: 120px;
}
.info {
margin-top: 10px;
text-align: center;
}
.info a {
color: #fff;
border-bottom: 2px solid;
text-decoration: none;
}
.main {
max-width: 600px;
margin: 30px auto;
}
.box {
display: inline-block;
vertical-align: top;
float: left;
width: 200px;
height: 200px;
}
.box .name {
color: #fff;
font-size: 20px;
margin-top: 80px;
text-align: center;
}
.box .ai-circled {
margin: 75px auto;
}
.box .ai-dotted {
margin: 85px auto 0;
}
.box .ai-spinner {
margin: 46px auto 0;
}
.btn {
display: inline-block;
color: #fff;
font-size: 14px;
font-family: 'Montserrat', 'Helvetica Neue', 'Arial', sans-serif;
width: 120px;
height: 50px;
border: 2px solid #fff;
text-align: center;
line-height: 46px;
text-decoration: none;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 0 10px;
}
.controls {
clear: both;
text-align: center;
}
.socials {
width: 350px;
margin: 50px auto;
text-align: center;
}
.twitter-share-button {
width: 90px ;
}
.github-ribbon, .github-ribbon:hover {
display: block;
background: #40bfc0;
color: #fff;
font-size: 14px;
padding: 8px 50px;
position: absolute;
top: 35px;
right: -45px;
text-decoration: none;
text-transform: lowercase;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}
</style>
</head>
<body ng-controller="MainCtrl">
<h1>ngActivityIndicator</h1>
<div class="info">
Preloaders provider for <a href="https://angularjs.org/" target="_blank">Angular.js</a> applications with built-in styles. <a href="https://github.com/voronianski/ngActivityIndicator#ngactivityindicator" target="_blank">Documentation.</a>
</div>
<div class="main clearfix">
<div class="box">
<div ng-activity-indicator="CircledWhite"></div>
<div ng-show="!AILoading" class="name">CircledWhite</div>
</div>
<div class="box">
<div ng-activity-indicator="DottedWhite"></div>
<div ng-show="!AILoading" class="name">DottedWhite</div>
</div>
<div class="box">
<div ng-activity-indicator="SpinnerWhite"></div>
<div ng-show="!AILoading" class="name">SpinnerWhite</div>
</div>
</div>
<div class="controls">
<a href="" class="btn" ng-click="start()">Start</a>
<a href="" class="btn" ng-click="stop()">Stop</a>
</div>
<!-- Social buttons and credits -->
<div class="socials">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="voronianski" data-lang="en-gb" data-hashtags="ngActivityIndicator">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="http://ghbtns.com/github-btn.html?user=voronianski&repo=ngActivityIndicator&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="86" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=voronianski&type=follow"
allowtransparency="true" frameborder="0" scrolling="0" width="140" height="20"></iframe>
</div>
<a href="https://github.com/voronianski/ngActivityIndicator" class="github-ribbon">Fork on Github</a>
<!-- App -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../ngActivityIndicator.js"></script>
<script>
var app = angular.module('exampleApp', ['ngActivityIndicator']);
app.controller('MainCtrl', ['$activityIndicator', '$scope',
function ($activityIndicator, $scope) {
$activityIndicator.startAnimating();
$scope.start = function () {
$activityIndicator.startAnimating();
};
$scope.stop = function () {
$activityIndicator.stopAnimating();
};
}
]);
</script>
</body>
</html>