A Pen by wanfeichao

Thumbnail
This awesome code was written by 0xfc, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0xfc ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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;

}

Comments