angular-theme-spinner

<!DOCTYPE html> <html lang="en" ng-app="demo"> <head> <title>angular-theme-spinner demo</title> <meta charset="utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="yes"/> <meta name="renderer" content="webkit"/> <meta http-equiv="Cache-Control" content="no-siteapp" /> <link rel="stylesheet" href="./libs/styles/railscasts.css"/> <link rel="stylesheet" href="./bower/fontawesome/css/font-awesome.min.css"/> <link rel="stylesheet" href="./bower/Hover/css/hover-min.css"/> <link rel="stylesheet" href="./bower/angular-motion/dist/angular-motion.min.css"/> <link rel="stylesheet" href="./bower/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="./angular-theme-spinner.min.css"/> <link rel="stylesheet" href="./demo.css"/> </head> <body ng-controller="ThemeController"> <div class="top-panel"> <div class="container"> <div class="top-panel-caption text-center"> <h1>angular-theme-spinner</h1> <br/> <p><font style="color: #fff;">angular-theme-spinner</font> offers you the easiest way of displaying spinner at specific area.</p> <br/> <p><a href="https://github.com/leftstick/angular-theme-spinner" class="hvr-glow" style="width: 70px; border-radius: 50%;"><i class="fa fa-github fa-5x"></i></a></p> <p>v1.2.3</p> </div> </div> </div> <div class="container"> <div class="row" style="margin-bottom: 20px;"> <div class="col-lg-4 text-center" ng-repeat="theme in themes1"> <div class="spinner-example" style="width: 150px; height: 150px;"> <th-spinner theme="theme.name" display="theme.running" size="theme.size"></th-spinner> </div> <h2>{{ theme.name }}</h2> <div hljs source="theme.source"></div> <div class="btn-group btn-group-justified btn-group-lg" role="group"> <a class="btn btn-info" ng-class="{active: theme.size === 'size-lg'}" role="button" ng-click="toggleSize(theme, 'size-lg', $event)">size-lg</a> <a class="btn btn-info" ng-class="{active: theme.size === 'size-md'}" role="button" ng-click="toggleSize(theme, 'size-md', $event)">size-md</a> <a class="btn btn-info" ng-class="{active: theme.size === 'size-sm'}" role="button" ng-click="toggleSize(theme, 'size-sm', $event)">size-sm</a> <a class="btn btn-default" role="button" ng-click="toggleDisplay(theme, $event)">{{ theme.running ? 'STOP' : 'RUN' }}</a> </div> </div> </div> <div class="row"> <div class="col-lg-4 text-center" ng-repeat="theme in themes2"> <div class="spinner-example" style="width: 150px; height: 150px;"> <th-spinner theme="theme.name" display="theme.running" size="theme.size"></th-spinner> </div> <h2>{{ theme.name }}</h2> <div hljs source="theme.source"></div> <div class="btn-group btn-group-justified btn-group-lg" role="group"> <a class="btn btn-info" ng-class="{active: theme.size === 'size-lg'}" role="button" ng-click="toggleSize(theme, 'size-lg', $event)">size-lg</a> <a class="btn btn-info" ng-class="{active: theme.size === 'size-md'}" role="button" ng-click="toggleSize(theme, 'size-md', $event)">size-md</a> <a class="btn btn-info" ng-class="{active: theme.size === 'size-sm'}" role="button" ng-click="toggleSize(theme, 'size-sm', $event)">size-sm</a> <a class="btn btn-default" role="button" ng-click="toggleDisplay(theme, $event)">{{ theme.running ? 'STOP' : 'RUN' }}</a> </div> </div> </div> <div class="row"> <div class="col-lg-4 text-center" ng-repeat="theme in themes3"> <div class="spinner-example" style="width: 150px; height: 150px;"> <th-spinner theme="theme.name" display="theme.running" size="theme.size"></th-spinner> </div> <h2>{{ theme.name }}</h2> <div hljs source="theme.source"></div> <div class="btn-group btn-group-justified btn-group-lg" role="group"> <a class="btn btn-info" ng-class="{active: theme.size === 'size-lg'}" role="button" ng-click="toggleSize(theme, 'size-lg', $event)">size-lg</a> <a class="btn btn-info" ng-class="{active: theme.size === 'size-md'}" role="button" ng-click="toggleSize(theme, 'size-md', $event)">size-md</a> <a class="btn btn-info" ng-class="{active: theme.size === 'size-sm'}" role="button" ng-click="toggleSize(theme, 'size-sm', $event)">size-sm</a> <a class="btn btn-default" role="button" ng-click="toggleDisplay(theme, $event)">{{ theme.running ? 'STOP' : 'RUN' }}</a> </div> </div> </div>  <hr/> <div class="row"> <div class="col-md-9"> <h2>DECLARATIVE <span class="text-muted">What you see is what you get</span></h2> <p class="lead">Use it just like native html element</p> </div> </div> <hr/> <div class="row"> <div class="col-md-offset-4 col-md-8"> <h2>THEMED <span class="text-muted">Multiple choice</span></h2> <p class="lead">Six themes are available for using. <code>tailing</code>, <code>audio-wave</code>, <code>windcatcher</code>, <code>spinner-section</code>, <code>spinner-section-far</code>, <code>circular</code>, <code>initspin</code></p> </div> </div> <hr/> <div class="row"> <div class="col-md-9"> <h2>ADJUSTABLE <span class="text-muted">Size can be changed</span></h2> <p class="lead">Three levels of size could be used in to adjust your app, <code>size-sm</code>, <code>size-md</code>, <code>size-lg</code></p> </div> </div> <hr class="featurette-divider">   <footer> <p class="pull-right"><a href="" back-to-top>Back to top</a></p> <p><a href="http://leftstick.github.io/">Blog</a></p> </footer> </div> <script type="text/javascript" src="./bower/angular/angular.js"></script> <script type="text/javascript" src="./libs/highlight.pack.js"></script> <script type="text/javascript" src="./libs/angular-highlightjs.min.js"></script> <script type="text/javascript" src="./bower/angular-animate/angular-animate.js"></script> <script type="text/javascript" src="./bower/angular-strap/dist/angular-strap.min.js"></script> <script type="text/javascript" src="./angular-theme-spinner.js"></script> <script src="./demo.js"></script> </body> </html>