ladda-angular
Version:
Ladda button directive for angularjs
120 lines (115 loc) • 7.76 kB
HTML
<html ng-app="laddaDemo">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Angularjs directive for Ladda button">
<meta name="keywords" content="Angularjs, Ladda, Ladda-angular, JavaScript, Button, Directive">
<title>Ladda angular</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ladda/0.9.7/ladda.min.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Ladda/0.9.4/ladda.min.js"></script>
<script src="../src/ladda-angular.js"></script>
<script src="demoCtrl.js"></script>
</head>
<body ng-controller="laddaDemoCtrl">
<a href="https://github.com/sachinchoolur/ladda-angular" class="fork"><img alt="Fork me on GitHub" src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" style="position: absolute; top: 0; right: 0; border: 0;"></a>
<div class="cont">
<div class="row group">
<h1>Ladda-angular</h1>
<p>Angularjs directive for Ladda button</p>
</div>
<div class="row group">
<div class="col">
<button ng-click="showLoading(1);" ladda-button="laddaLoading[1]" data-color="green" data-style="expand-left" class="ladda-button"><span class="ladda-label">expand-left</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(2);" ladda-button="laddaLoading[2]" data-color="green" data-style="expand-left" class="ladda-button"><span class="ladda-label">expand-left</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(3);" ladda-button="laddaLoading[3]" data-color="green" data-style="expand-up" class="ladda-button"><span class="ladda-label">expand-up</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(4);" ladda-button="laddaLoading[4]" data-color="green" data-style="expand-down" class="ladda-button"><span class="ladda-label">expand-down</span>
</button>
</div>
</div>
<div class="row group">
<div class="col">
<button ng-click="showLoading(5);" ladda-button="laddaLoading[5]" data-color="red" data-style="contract" class="ladda-button"><span class="ladda-label">contract</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(6);" ladda-button="laddaLoading[6]" data-color="red" data-style="contract-overlay" class="ladda-button"><span class="ladda-label">overlay</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(7);" ladda-button="laddaLoading[7]" data-color="red" data-style="zoom-in" class="ladda-button"><span class="ladda-label">zoom-in</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(8);" ladda-button="laddaLoading[8]" data-color="red" data-style="zoom-out" class="ladda-button"><span class="ladda-label">zoom-out</span>
</button>
</div>
</div>
<div class="row group">
<div class="col">
<button ng-click="showLoading(9);" ladda-button="laddaLoading[9]" data-color="blue" data-style="slide-left" class="ladda-button"> <span class="ladda-label">slide-left</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(10);" ladda-button="laddaLoading[10]" data-color="blue" data-style="slide-right" class="ladda-button"> <span class="ladda-label">slide-right</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(11);" ladda-button="laddaLoading[11]" data-color="blue" data-style="slide-up" class="ladda-button"> <span class="ladda-label">slide-up</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(12);" ladda-button="laddaLoading[12]" data-color="blue" data-style="slide-down" class="ladda-button"> <span class="ladda-label">slide-down</span>
</button>
</div>
</div>
<div class="row group">
<div class="col">
<button ng-click="loadingWithProgress(1);" ladda-button="laddaLoadingBar[1]" data-color="purple" data-style="slide-left" class="ladda-button"> <span class="ladda-label">progress bar</span>
</button>
</div>
<div class="col">
<button ng-click="loadingWithProgress(2);" ladda-button="laddaLoadingBar[2]" data-color="purple" data-style="slide-right" class="ladda-button"> <span class="ladda-label">progress bar</span>
</button>
</div>
<div class="col">
<button ng-click="loadingWithProgress(3);" ladda-button="laddaLoadingBar[3]" data-color="purple" data-style="slide-up" class="ladda-button"> <span class="ladda-label">progress bar</span>
</button>
</div>
<div class="col">
<button ng-click="loadingWithProgress(4);" ladda-button="laddaLoadingBar[4]" data-color="purple" data-style="slide-down" class="ladda-button"> <span class="ladda-label">progress bar</span>
</button>
</div>
</div>
<div class="row group">
<div class="col">
<button ng-click="showLoading(13);" ladda-button="laddaLoading[13]" data-color="mint" data-size="xs" data-style="slide-left" class="ladda-button"> <span class="ladda-label">Extra Small</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(14);" ladda-button="laddaLoading[14]" data-color="mint" data-size="s" data-style="slide-right" class="ladda-button"> <span class="ladda-label">Small</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(15);" ladda-button="laddaLoading[15]" data-color="mint" data-size="l" data-style="slide-up" class="ladda-button"> <span class="ladda-label">Large</span>
</button>
</div>
<div class="col">
<button ng-click="showLoading(16);" ladda-button="laddaLoading[16]" data-color="mint" data-size="xl" data-style="slide-down" class="ladda-button"> <span class="ladda-label">Extra Large</span>
</button>
</div>
</div>
</div>
</body>
</html>