angular-progress-button
Version:
Brings buttons with built-in progress meters to AngularJS.
36 lines (30 loc) • 1.64 kB
HTML
<html ng-app="progressButtonDemo">
<head>
<title>angular-progress-button — Buttons with built-in progress bars for AngularJS</title>
<link href="../dist/progress-button.min.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
<meta charset="utf-8">
</head>
<body>
<div ng-controller="ProgressButtonsCtrl">
<h1>Progress Buttons</h1>
<progress-button ng-click="simulateProgress(0, 2)" value="buttons[0].value">Submit</progress-button>
<progress-button ng-click="simulateProgress(1, 3)" value="buttons[1].value" class="green" in-progress="Working…" complete="Finished!" type="bottom-bar">Action!</progress-button>
<progress-button ng-click="simulateProgress(2, 2.5)" value="buttons[2].value" class="red" in-progress="Generating…" complete="Download" type="vertical">Generate</progress-button>
</div>
<div ng-controller="ProgressControlCtrl">
<h1>Progress Control</h1>
<progress-button ng-click="startSimulation()" value="value">Start</progress-button>
<div class="control-area">
<a class="command" ng-click="value = value + 0.1; stopSimulation()">Increment</a>
<a class="command" ng-click="value = 0.01; stopSimulation()">Set to 1%</a>
<a class="command" ng-click="value = 0.5; stopSimulation()">Set to 50%</a>
<a class="command" ng-click="value = 1.0; stopSimulation()">Finish</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="../dist/progress-button.min.js"></script>
<script src="script.js"></script>
</body>
</html>