<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js">
</script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js">
</script>
<script src="example.js">
</script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl" class="modal-demo">
<span ng-init="showLoadingComponentModal()"></span>
<button type="button" class="btn btn-default" ng-click="showLoadingComponentModal()">Show Preloader</button>
<hr>
</div>
</body>
</html>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log, $timeout) {
$scope.showLoadingComponentModal = function () {
$scope.progress = 0;
var loadingModalInstance = $uibModal.open({
templateUrl: 'loading.html',
backdrop: 'static',
size: 'xs',
controller: function ($scope, $uibModalInstance) {
$log.info('Modal opened at: ' + new Date());
$timeout(function () {
$uibModalInstance.close("cancel");
$log.info('Modal dismissed at: ' + new Date());
}, 2000);
}
});
};
});
<div class="modal-body text-center">
Loading...
</div>
.modal-xs {
margin: 25% auto 0;
width: 240px;
}