angular-busy/demo/index.html at master · cgross/angular-busy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>Angular Busy Demo</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="../dist/angular-busy.css" rel="stylesheet">
  <link href="gh-fork-ribbon.css" rel="stylesheet">

</head>
<body ng-controller="DemoCtrl" style="padding-top:0px">

  <div>

    <div class="github-fork-ribbon-wrapper right">
      <div class="github-fork-ribbon">
        <a href="https://github.com/cgross/angular-busy">Star on GitHub</a>
      </div>
    </div>

    <div class="container">
      <div class="row">

        <div class="col-md-12">
            <h2>angular-busy</h2>
            <p class="lead">Show busy/loading indicators on any $http or $resource request, or on any promise.</p>
        </div>

      </div>

      <div class="row">

        <div class="col-md-4">

          <form class="form-horizontal" role="form">
            <legend>Demo Options</legend>
            <div class="form-group">
              <label for="delayInput" class="col-sm-5 control-label">Delay (ms)</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="delayInput" ng-model="delay">
              </div>
            </div>
            <div class="form-group">
              <label for="durationInput" class="col-sm-5 control-label">Min Duration (ms)</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="durationInput" ng-model="minDuration">
              </div>
            </div>
            <div class="form-group">
              <label for="message" class="col-sm-5 control-label">Message</label>
              <div class="col-sm-6">
                <input type="text" class="form-control" id="message" ng-model="message">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-5 col-sm-5">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" ng-model="backdrop"> Show Backdrop
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="template" class="col-sm-5 control-label">Template Url</label>
              <div class="col-sm-7">
                <select class="form-control" id="template" ng-model="templateUrl">
                  <option value=''>Standard</option>
                  <option value='custom-template.html'>custom-template.html</option>
                </select>
              </div>
            </div>
            <div class="col-sm-offset-5 col-sm-7" style="padding-right:0px">
              <button class="btn btn-default pull-right" ng-click="demo()">Demo</button>
            </div>
          </form>

        </div>

        <div class="col-md-offset-1 col-md-7" style="padding-top:28px">

          <div cg-busy="{promise:promise,templateUrl:templateUrl,message:message,backdrop:backdrop,delay:delay,minDuration:minDuration}">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="2">1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@TwBootstrap</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>

    </div>

  </div>


  <script src="../bower_components/angular/angular.js"></script>
  <script src="../bower_components/angular-animate/angular-animate.js"></script>
  <script src="../dist/angular-busy.js"></script>
  <script src="demo.js"></script>

</body>
</html>