<!doctype html>
<html>
<head>
<!-- angular -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.min.js"></script>
<!-- loadingbar -->
<script src="src/loading-bar.js"></script>
<link href='src/loading-bar.css' rel='stylesheet' />
<!-- loadingbar2 -->
<script src="script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="http://sparkalow.github.io/angular-count-to/js/angular-count-to.js"></script>
<link href='style.css' rel='stylesheet' />
<!-- example app -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="app.js"></script>
<link href='app.css' rel='stylesheet' />
<link href='http://fonts.googleapis.com/css?family=Oxygen:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body ng-app="LoadingBarExample" ng-controller="ExampleCtrl">
<div class="jumbotron">
<h1><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" width="50" height="50" /> Angular UI</h1>
<h1>Angular Loading Bar</h1>
<p>An automatic loading bar using angular interceptors.<small> It works automatically, so simply include it as a dependency and it will automatically display the progress of your $http requests.</small></p>
<p>
<a href="https://github.com/chieffancypants/angular-loading-bar" class="btn btn-primary btn-lg">
<i class="glyphicon glyphicon-download"></i> Download
</a>
<a href="https://github.com/chieffancypants/angular-loading-bar" class="btn btn-default btn-lg">
<i class="glyphicon glyphicon-random"></i> Fork on GitHub
</a>
</p>
</div>
<div class="examples" ng-hide="fakeIntro">
<!-- <h4>Examples:</h4> -->
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary btn-lg" ng-click="start()">
<i class="glyphicon glyphicon-play-circle"></i> <span>cfpLoadingBar.</span>start()
</a>
<a href="#" class="btn btn-primary btn-lg" ng-click="complete()">
<i class="glyphicon glyphicon-play-circle"></i> <span>cfpLoadingBar.</span>complete()
</a>
<a href="#" class="btn btn-primary btn-lg" ng-click="fetch()"><i class="glyphicon glyphicon-play-circle"></i> Real Example <span> (from reddit)</span></a>
</div>
</div>
<h4 class="loading-text" ng-show="subreddit">Showing 100 results for: <span>/r/{{subreddit}}...</span></h4>
<div ng-repeat="post in posts" class="panel panel-default">
<div class="panel-body media">
<span class="badge pull-right">{{post.data.score}}</span>
<div class="pull-left" ng-if="post.data.thumbnail">
<img class="thumbnail" ng-src="{{post.data.thumbnail}}">
</div>
<div class="">
<div class="">
<a href="{{post.data.url}}">{{post.data.title}}</a>
<p class="meta">by {{post.data.author}}</p>
<p class="meta-comments">{{post.data.num_comments}} comments</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/*!
* angular-loading-bar v0.9.0
* https://chieffancypants.github.io/angular-loading-bar
* Copyright (c) 2016 Wes Cruver
* License: MIT
*/
/*
* angular-loading-bar
*
* intercepts XHR requests and creates a loading bar.
* Based on the excellent nprogress work by rstacruz (more info in readme)
*
* (c) 2013 Wes Cruver
* License: MIT
*/
(function() {
'use strict';
// Alias the loading bar for various backwards compatibilities since the project has matured:
angular.module('angular-loading-bar', ['cfp.loadingBarInterceptor']);
angular.module('chieffancypants.loadingBar', ['cfp.loadingBarInterceptor']);
/**
* loadingBarInterceptor service
*
* Registers itself as an Angular interceptor and listens for XHR requests.
*/
angular.module('cfp.loadingBarInterceptor', ['cfp.loadingBar'])
.config(['$httpProvider', function ($httpProvider) {
var interceptor = ['$q', '$cacheFactory', '$timeout', '$rootScope', '$log', 'cfpLoadingBar', function ($q, $cacheFactory, $timeout, $rootScope, $log, cfpLoadingBar) {
/**
* The total number of requests made
*/
var reqsTotal = 0;
/**
* The number of requests completed (either successfully or not)
*/
var reqsCompleted = 0;
/**
* The amount of time spent fetching before showing the loading bar
*/
var latencyThreshold = cfpLoadingBar.latencyThreshold;
/**
* $timeout handle for latencyThreshold
*/
var startTimeout;
/**
* calls cfpLoadingBar.complete() which removes the
* loading bar from the DOM.
*/
function setComplete() {
$timeout.cancel(startTimeout);
cfpLoadingBar.complete();
reqsCompleted = 0;
reqsTotal = 0;
}
/**
* Determine if the response has already been cached
* @param {Object} config the config option from the request
* @return {Boolean} retrns true if cached, otherwise false
*/
function isCached(config) {
var cache;
var defaultCache = $cacheFactory.get('$http');
var defaults = $httpProvider.defaults;
// Choose the proper cache source. Borrowed from angular: $http service
if ((config.cache || defaults.cache) && config.cache !== false &&
(config.method === 'GET' || config.method === 'JSONP')) {
cache = angular.isObject(config.cache) ? config.cache
: angular.isObject(defaults.cache) ? defaults.cache
: defaultCache;
}
var cached = cache !== undefined ?
cache.get(config.url) !== undefined : false;
if (config.cached !== undefined && cached !== config.cached) {
return config.cached;
}
config.cached = cached;
return cached;
}
return {
'request': function(config) {
// Check to make sure this request hasn't already been cached and that
// the requester didn't explicitly ask us to ignore this request:
if (!config.ignoreLoadingBar && !isCached(config)) {
$rootScope.$broadcast('cfpLoadingBar:loading', {url: config.url});
if (reqsTotal === 0) {
startTimeout = $timeout(function() {
cfpLoadingBar.start();
}, latencyThreshold);
}
reqsTotal++;
cfpLoadingBar.set(reqsCompleted / reqsTotal);
}
return config;
},
'response': function(response) {
if (!response || !response.config) {
$log.error('Broken interceptor detected: Config object not supplied in response:\n https://github.com/chieffancypants/angular-loading-bar/pull/50');
return response;
}
if (!response.config.ignoreLoadingBar && !isCached(response.config)) {
reqsCompleted++;
if (reqsCompleted >= reqsTotal) {
$rootScope.$broadcast('cfpLoadingBar:loaded', {url: response.config.url, result: response});
setComplete();
} else {
cfpLoadingBar.set(reqsCompleted / reqsTotal);
}
}
return response;
},
'responseError': function(rejection) {
if (!rejection || !rejection.config) {
$log.error('Broken interceptor detected: Config object not supplied in rejection:\n https://github.com/chieffancypants/angular-loading-bar/pull/50');
return $q.reject(rejection);
}
if (!rejection.config.ignoreLoadingBar && !isCached(rejection.config)) {
reqsCompleted++;
if (reqsCompleted >= reqsTotal) {
$rootScope.$broadcast('cfpLoadingBar:loaded', {url: rejection.config.url, result: rejection});
setComplete();
} else {
cfpLoadingBar.set(reqsCompleted / reqsTotal);
}
}
return $q.reject(rejection);
}
};
}];
$httpProvider.interceptors.push(interceptor);
}]);
/**
* Loading Bar
*
* This service handles adding and removing the actual element in the DOM.
* Generally, best practices for DOM manipulation is to take place in a
* directive, but because the element itself is injected in the DOM only upon
* XHR requests, and it's likely needed on every view, the best option is to
* use a service.
*/
angular.module('cfp.loadingBar', [])
.provider('cfpLoadingBar', function() {
this.autoIncrement = true;
this.includeSpinner = true;
this.includeBar = true;
this.latencyThreshold = 100;
this.startSize = 0.02;
this.parentSelector = 'body';
this.spinnerTemplate = '<div id="loading-bar-spinner"><div class="spinner-icon"></div></div>';
this.loadingBarTemplate = '<div id="loading-bar"><div class="bar"><div class="peg"></div></div></div>';
this.$get = ['$injector', '$document', '$timeout', '$rootScope', function ($injector, $document, $timeout, $rootScope) {
var $animate;
var $parentSelector = this.parentSelector,
loadingBarContainer = angular.element(this.loadingBarTemplate),
loadingBar = loadingBarContainer.find('div').eq(0),
spinner = angular.element(this.spinnerTemplate);
var incTimeout,
completeTimeout,
started = false,
status = 0;
var autoIncrement = this.autoIncrement;
var includeSpinner = this.includeSpinner;
var includeBar = this.includeBar;
var startSize = this.startSize;
/**
* Inserts the loading bar element into the dom, and sets it to 2%
*/
function _start() {
if (!$animate) {
$animate = $injector.get('$animate');
}
$timeout.cancel(completeTimeout);
// do not continually broadcast the started event:
if (started) {
return;
}
var document = $document[0];
var parent = document.querySelector ?
document.querySelector($parentSelector)
: $document.find($parentSelector)[0]
;
if (! parent) {
parent = document.getElementsByTagName('body')[0];
}
var $parent = angular.element(parent);
var $after = parent.lastChild && angular.element(parent.lastChild);
$rootScope.$broadcast('cfpLoadingBar:started');
started = true;
if (includeBar) {
$animate.enter(loadingBarContainer, $parent, $after);
}
if (includeSpinner) {
$animate.enter(spinner, $parent, loadingBarContainer);
}
_set(startSize);
}
/**
* Set the loading bar's width to a certain percent.
*
* @param n any value between 0 and 1
*/
function _set(n) {
if (!started) {
return;
}
var pct = (n * 100) + '%';
loadingBar.css('width', pct);
status = n;
// increment loadingbar to give the illusion that there is always
// progress but make sure to cancel the previous timeouts so we don't
// have multiple incs running at the same time.
if (autoIncrement) {
$timeout.cancel(incTimeout);
incTimeout = $timeout(function() {
_inc();
}, 250);
}
}
/**
* Increments the loading bar by a random amount
* but slows down as it progresses
*/
function _inc() {
if (_status() >= 1) {
return;
}
var rnd = 0;
// TODO: do this mathmatically instead of through conditions
var stat = _status();
if (stat >= 0 && stat < 0.25) {
// Start out between 3 - 6% increments
rnd = (Math.random() * (5 - 3 + 1) + 3) / 100;
} else if (stat >= 0.25 && stat < 0.65) {
// increment between 0 - 3%
rnd = (Math.random() * 3) / 100;
} else if (stat >= 0.65 && stat < 0.9) {
// increment between 0 - 2%
rnd = (Math.random() * 2) / 100;
} else if (stat >= 0.9 && stat < 0.99) {
// finally, increment it .5 %
rnd = 0.005;
} else {
// after 99%, don't increment:
rnd = 0;
}
var pct = _status() + rnd;
_set(pct);
}
function _status() {
return status;
}
function _completeAnimation() {
status = 0;
started = false;
}
function _complete() {
if (!$animate) {
$animate = $injector.get('$animate');
}
_set(1);
$timeout.cancel(completeTimeout);
// Attempt to aggregate any start/complete calls within 500ms:
completeTimeout = $timeout(function() {
var promise = $animate.leave(loadingBarContainer, _completeAnimation);
if (promise && promise.then) {
promise.then(_completeAnimation);
}
$animate.leave(spinner);
$rootScope.$broadcast('cfpLoadingBar:completed');
}, 500);
}
return {
start : _start,
set : _set,
status : _status,
inc : _inc,
complete : _complete,
autoIncrement : this.autoIncrement,
includeSpinner : this.includeSpinner,
latencyThreshold : this.latencyThreshold,
parentSelector : this.parentSelector,
startSize : this.startSize
};
}]; //
}); // wtf javascript. srsly
})(); //
/*!
* angular-loading-bar v0.9.0
* https://chieffancypants.github.io/angular-loading-bar
* Copyright (c) 2016 Wes Cruver
* License: MIT
*/
/* Make clicks pass-through */
#loading-bar,
#loading-bar-spinner {
pointer-events: none;
-webkit-pointer-events: none;
-webkit-transition: 350ms linear all;
-moz-transition: 350ms linear all;
-o-transition: 350ms linear all;
transition: 350ms linear all;
}
#loading-bar.ng-enter,
#loading-bar.ng-leave.ng-leave-active,
#loading-bar-spinner.ng-enter,
#loading-bar-spinner.ng-leave.ng-leave-active {
opacity: 0;
}
#loading-bar.ng-enter.ng-enter-active,
#loading-bar.ng-leave,
#loading-bar-spinner.ng-enter.ng-enter-active,
#loading-bar-spinner.ng-leave {
opacity: 1;
}
#loading-bar .bar {
-webkit-transition: width 350ms;
-moz-transition: width 350ms;
-o-transition: width 350ms;
transition: width 350ms;
background: #29d;
position: fixed;
z-index: 10002;
top: 0;
left: 0;
width: 100%;
height: 2px;
border-bottom-right-radius: 1px;
border-top-right-radius: 1px;
}
/* Fancy blur effect */
#loading-bar .peg {
position: absolute;
width: 70px;
right: 0;
top: 0;
height: 2px;
opacity: .45;
-moz-box-shadow: #29d 1px 0 6px 1px;
-ms-box-shadow: #29d 1px 0 6px 1px;
-webkit-box-shadow: #29d 1px 0 6px 1px;
box-shadow: #29d 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
#loading-bar-spinner {
display: block;
position: fixed;
z-index: 10002;
top: 10px;
left: 10px;
}
#loading-bar-spinner .spinner-icon {
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
-webkit-animation: loading-bar-spinner 400ms linear infinite;
-moz-animation: loading-bar-spinner 400ms linear infinite;
-ms-animation: loading-bar-spinner 400ms linear infinite;
-o-animation: loading-bar-spinner 400ms linear infinite;
animation: loading-bar-spinner 400ms linear infinite;
}
@-webkit-keyframes loading-bar-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes loading-bar-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes loading-bar-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes loading-bar-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes loading-bar-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
angular.module('LoadingBarExample', ['chieffancypants.loadingBar', 'ngAnimate'])
.config(function(cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeSpinner = true;
})
.controller('ExampleCtrl', function ($scope, $http, $timeout, cfpLoadingBar) {
$scope.posts = [];
$scope.section = null;
$scope.subreddit = null;
$scope.subreddits = ['cats', 'pics', 'funny', 'gaming', 'AdviceAnimals', 'aww'];
var getRandomSubreddit = function() {
var sub = $scope.subreddits[Math.floor(Math.random() * $scope.subreddits.length)];
// ensure we get a new subreddit each time.
if (sub == $scope.subreddit) {
return getRandomSubreddit();
}
return sub;
};
$scope.fetch = function() {
$scope.subreddit = getRandomSubreddit();
$http.jsonp('http://www.reddit.com/r/' + $scope.subreddit + '.json?limit=50&jsonp=JSON_CALLBACK').success(function(data) {
$scope.posts = data.data.children;
});
};
$scope.start = function() {
cfpLoadingBar.start();
};
$scope.complete = function () {
cfpLoadingBar.complete();
}
// fake the initial load so first time users can see it right away:
$scope.start();
$scope.fakeIntro = true;
$timeout(function() {
$scope.complete();
$scope.fakeIntro = false;
}, 750);
});
body {
background-color: #ecf0f1;
/*padding: 25px;*/
font-family: 'Oxygen', sans;
width: 85%;
margin: auto;
overflow-y: scroll;
}
.thumbnail {
width: 70px;
height: 70px;
/*border: 1px solid #F1C6C2;*/
border: 1px solid #CE8982
}
a {
font-size:16px;
}
.badge {
background-color: #428bca;
}
.meta, .meta-comments {
font-size:12px;
color: #333;
margin-bottom: 0;
}
.meta-comments {
font-weight: bold;
}
footer.navbar {
height: 65px;
width: 100%;
border-top: 1px solid #ccc;
box-shadow: 0 -1px 4px rgba(0,0,0,0.15);
margin: 0;
border-radius: 0;
}
.panel {
-webkit-transition: 0.75s ease-in-out all;
-moz-transition: 0.75s ease-in-out all;
-o-transition: 0.75s ease-in-out all;
transition: 0.75s ease-in-out all;
background-color: #fff;
border: none;
margin-bottom: 15px;
}
.panel a {
color: #e74c3c;
font-weight: bold;
}
.panel .badge {
background-color: #e74c3c;
color: #fff;
}
.panel.ng-enter {
opacity: 0;
}
.panel.ng-enter-active {
opacity: 1;
transition-delay: 0.5s;
}
.panel-body {
border: 1px solid #ccc;
/*box-shadow: 0 1px 3px rgba(0,0,0,0.1);*/
border-radius: 5px;
}
.examples {
margin-bottom: 25px;
transition-delay: 0.5s;
}
.examples.ng-hide-add,
.examples.ng-hide-remove,
.loading-text.ng-hide-add,
.loading-text.ng-hide-remove {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
display:block!important;
}
.examples.ng-hide-add,
.examples.ng-hide-remove {
transition-delay: 0.5s;
}
.examples.ng-hide-add.ng-hide-add-active,
.examples.ng-hide-remove,
.loading-text.ng-hide-add.ng-hide-add-active,
.loading-text.ng-hide-remove {
opacity:0;
}
.examples.ng-hide-add,
.examples.ng-hide-remove.ng-hide-remove-active,
.loading-text.ng-hide-add,
.loading-text.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
.examples .btn i {
top: 2px;
}
.examples span {
color: #A1FFC9;
}
.btn-primary {
background-color: #2ecc71;
border: 1px solid #27ae60;
}
.btn-primary:hover {
background-color: #32B96C;
border: 1px solid #27ae60;
}
.jumbotron {
color: #333;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border-radius: 5px;
padding-top: 5px;
padding-bottom: 10px;
margin-top: 15px;
border: 1px solid #ccc;
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.jumbotron h1 {
color: #333;
letter-spacing: -2px;
}
.jumbotron small {
color: #999;
}
h1 {
font-family: 'Oxygen', sans;
/*padding-bottom: 10px;*/
}
h4 {
font-family: 'Oxygen', sans;
color: #888;
padding-bottom: 5px;
padding-top: 10px;
}
h4 span {
color: #e74c3c;
}
/*
* override the default CSS as an example
*/
#loading-bar .bar {
background: #2c3e50;
}
#loading-bar-spinner .spinner-icon {
border-top-color: #2c3e50;
border-left-color: #2c3e50;
}
#loading-bar .peg {
-moz-box-shadow: #2c3e50 1px 0 6px 1px;
-ms-box-shadow: #2c3e50 1px 0 6px 1px;
-webkit-box-shadow: #2c3e50 1px 0 6px 1px;
box-shadow: #2c3e50 1px 0 6px 1px;
}