Skip to content

Instantly share code, notes, and snippets.

@geelen

geelen/index.html

Created June 7, 2012 05:16
Show Gist options
  • Save geelen/2886724 to your computer and use it in GitHub Desktop.
Save geelen/2886724 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html ng-app="application" preloader="splash">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Preloader Experiment</title>
<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="preloader-0.0.1.js"></script>
<script>
angular.module( "application", [] )
.directive( "preloader", PreloaderFactory );
</script>
</head>
<body>
</body>
</html>
Raw
preloader-0.0.1.js
PreloaderFactory = function( $compile ) {
var directive = {
restrict : "A",
link : function( scope, elm, attrs ) {
scope.preloader = jQuery( "<ng-include />" );
scope.preloader.attr( "src", "'"+ attrs.preloader +".html'" );
$compile( scope.preloader )( scope );
jQuery( "body" ).append( scope.preloader );
scope.$on( "applicationComplete", function( event ) {
jQuery( scope.preloader ).remove();
});
}
}
return directive;
}
function PreloaderController( $scope, $timeout ) {
$scope.percentCompleted = 0;
$scope.applicationProgressMock = function() {
if( $scope.percentCompleted == 100 ) {
$scope.$emit( "applicationComplete" );
}
else
{
$scope.percentCompleted += 5;
$timeout( $scope.applicationProgressMock, 100 );
}
}
$timeout( $scope.applicationProgressMock, 100 );
$scope.clickHandler = function( event ) {
$scope.percentCompleted = 100;
}
}
Raw
splash.html
<h1 ng-click="clickHandler(event)" ng-controller="PreloaderController">
Loading, please wait...still loading {{percentCompleted}}%
</h1>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment