<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by wanfeichao</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<html ng-app="TestMd">
<head>
<meta charset="UTF-8">
<title>MD</title>
<link rel="stylesheet" type="text/css" href="http://7xlphe.com1.z0.glb.clouddn.com/angular-material.min.css">
<script type="text/javascript" src="http://7xlphe.com1.z0.glb.clouddn.com/angular.min.js"></script>
<script type="text/javascript" src="http://7xlphe.com1.z0.glb.clouddn.com/angular-material.min.js"></script>
<script type="text/javascript" src="http://7xlphe.com1.z0.glb.clouddn.com/angular-aria.min.js"></script>
<script type="text/javascript" src="http://7xlphe.com1.z0.glb.clouddn.com/angular-animate.min.js"></script>
</head>
<body>
<div ng-controller="MdController">
<md-button class="md-raised md-accent" ng-click="showDialg()">
Show Progress Dialog
</md-button>
</div>
<script type="text/ng-template" id="uploadProgressDialog.html">
<md-dialog aria-label="FileUpload">
<md-dialog-content>
<h3>文件上传</h3>
<md-progress-linear md-mode="determinate" value="{{ vm.progress }}"></md-progress-linear>
<br>
<div layout="row" layout-align="end center">
<md-button class="md-raised md-accent" ng-click="vm.close()">
关闭
</md-button>
</div>
</md-dialog-content>
</md-dialog>
</script>
</body>
</html>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/0xfc/a-pen-by-wanfeichao-grkxkr */
md-dialog {
width: 500px;
}
/*Downloaded from https://www.codeseek.co/0xfc/a-pen-by-wanfeichao-grkxkr */
angular.module('TestMd',['ngMaterial'])
.controller('MdController', MdController)
.controller('UploadProgressDialogCtrl', UploadProgressDialogCtrl);
function MdController($scope, $mdDialog) {
$scope.showDialg = function() {
$mdDialog.show({
templateUrl: 'uploadProgressDialog.html',
controller: 'UploadProgressDialogCtrl',
controllerAs: 'vm',
});
};
}
function UploadProgressDialogCtrl($mdDialog, $interval) {
var vm = this;
vm.progress = 0;
vm.close = function() {
$mdDialog.cancel();
}
vm.progress += 10;
vm.progress += 10;
vm.progress += 10;
vm.progress += 10;
vm.progress += 10;
vm.progress += 10;
// $interval(function() {
// vm.progress += 10;
// }, 100);
vm.progress += 10;
vm.progress += 10;
vm.progress += 10;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
AngularJS
Material Design Lite
