Ajax Loader
HTML 
<!doctype html>
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,400,700" />
7
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
8
  <title>Service Status</title>
9
</head>
10
<body ng-app="status" ng-controller="statusCtrl">
11
  <div class="container">
12
    <div class="row">
13
    
14
      <section class="col-md-7">
15
        <header>
16
          <h1>Service Status</h1>
17
        </header>
18
19
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
20
        
21
          <div class="panel panel-default" ng-repeat="service in status.services">
22
            <div class="panel-heading" role="tab" id="heading{{$index}}">
23
              <h4 class="panel-title">
24
                <span class="service-status service-{{service.status}}" ng-repeat="message in status.messages" ng-show="message.status=='{{service.status}}'" title="{{message.message}}"></span><a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index}}" aria-expanded="false" aria-controls="collapse{{$index}}" ng-class="getClass($index)" ng-click="toggleSelect($index)"><i class="fa fa-{{getIcon($index)}}-circle"></i>{{service.name}}</a>
25
              </h4>
26
            </div><!-- / .panel-heading -->
27
            <div id="collapse{{$index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$index}}">
28
              <div class="panel-body">
29
                <h4>Service Status <span class="label label-default service-status-label service-{{service.status}}">{{service.status}}</span></h4>
30
                <p class="service-statusinfo" ng-repeat="message in status.messages" ng-show="message.status=='{{service.status}}'">{{message.message}}</p>
31
              
32
                <hr/>
33
              
34
                <a href="#" class="btn btn-default service-btn"><i class="fa fa-send-o"></i> Report an Issue</a> <a href="#" class="btn btn-default service-btn"><i class="fa fa-support"></i> Support with {{service.name}}</a>
35
                <a href="#" class="btn btn-default service-btn"><i class="fa fa-sign-in"></i> {{service.name}} Sign-In</a>
36
              
37
                <hr/>
38
              
39
                <h4><i class="fa fa-twitter"></i> Recent Updates for {{service.name}}</h4>
40
                <dl>
41
                  <dt>Donec semper risus <span class="text-muted">23 Dec 14</span></dt>
42
                  <dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper risus id gravida vestibulum.</p></dd>
43
                  <dt>Consectetur adipiscing <span class="text-muted">22 Dec 14</span></dt>
44
                  <dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></dd>
45
                </dl>
46
              
47
                <hr/>
48
              
49
                <h4>Service Summary</h4>
50
                <table class="table table-striped service-status-table">
51
                  <tr>
52
                    <td>{{service.name}} <span class="text-muted">({{service.fullname}})</span></td>
53
                  </tr>
54
                  <tr>
55
                    <td ng-bind-html="service.description | toTrusted"></td>
56
                  </tr>
57
                  <tr>
58
                    <td><a href="#">More information on {{service.name}} <i class="fa fa-external-link-square"></i></a></td>
59
                  </tr>
60
                </table>
61
              
62
                <hr/>
63
              
64
              </div><!-- / .panel-body -->
65
            </div><!-- / .panel-collapse -->
66
          </div><!-- / .panel -->
67
        
68
        </div><!-- / .panel-group -->
69
      
70
      </section>
71
    
72
    </div><!-- / .row -->
73
  </div><!-- / .container -->
74
75
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
76
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.js"></script>
77
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
78
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
79
</body>
80
</html>
 
CSS 
// Import /////////////////////////////////////////////////////////////////////
1
// Import /////////////////////////////////////////////////////////////////////
2
 
3
  @import 'https://raw.githubusercontent.com/twbs/bootstrap/master/less/bootstrap.less';
4
 
5
// Mixins /////////////////////////////////////////////////////////////////////
6
 
7
.transition(@setting: all .2s linear){
8
  -moz-transition: @setting;
9
  -ms-transition: @setting;
10
  -o-transition: @setting;
11
  -webkit-transition: @setting;
12
  transition: @setting;
13
}
14
 
15
// Type ///////////////////////////////////////////////////////////////////////
16
 
17
body{
18
  font-family: 'Lato' sans-serif;
19
}
20
 
21
h1{
22
  margin-bottom: 35px;
23
}
24
 
25
a{
26
  color: #0A51A1;
27
}
28
 
29
// Panels /////////////////////////////////////////////////////////////////////
30
 
31
.panel-title .fa-plus-circle, .panel-title .fa-minus-circle{
32
  color: #ccc;
33
  margin: 0 5px 0 -5px;
34
}
35
 
36
.panel-group .panel{
37
  border-radius: 0;
38
}
39
 
40
.panel-title{
41
  position: relative;
42
  a:hover, a:focus{
43
    text-decoration: none;
44
  }
45
}
46
 
47
.panel-body{
48
  position: relative;
49
  p{
50
    margin-bottom: 10px;
51
  }
52
  h4{
53
    position: relative;
54
  }
55
}
56
 
57
.panel-body{
58
  h4{
59
      margin-bottom: 15px;
60
    position: relative;
61
  }
62
}
63
 
64
// Service Status /////////////////////////////////////////////////////////////
65
 
66
.service{
67
  position: relative;
68
}
69
 
70
.service-status{
71
  background: #ccc;
72
  border-radius: 50%;
73
  color: #fff;
74
  height: 15px;
75
  margin: 1px -3px 0 0;
76
  padding: 0;
77
  position: absolute;
78
  right: 0;
79
  top: 0;
80
  width: 15px;
81
}
82
 
83
.service-status-label{
84
  font-size: 0.6em;
85
  margin: 3px 0 0 10px;
86
  position: absolute;
87
  text-transform: uppercase;
88
}
89
 
90
// Status colours ///////////////////////////////
91
 
92
.service-normal{
93
  background: #0E7F11; // green
94
}
95
 
96
.service-issues{
97
  background: #FAC430; // yellow
98
}
99
 
100
.service-down{
101
  background: #ED423C; // red
102
}
103
 
104
// Service info /////////////////////////////////
105
 
106
.service-statusinfo{
107
  font-size: 1.2em;
108
}
109
 
110
.service-status-table{
111
  margin: 20px 0 30px 0;
112
}
113
 
114
.service-status-table td a .fa{
115
  color: #ccc;
116
  margin-left: 3px;
117
}
118
 
119
// Muted text ///////////////////////////////////
120
 
121
.service-status span.text-muted{
122
  font-weight: normal;
123
}
124
 
125
dt span.text-muted{
126
  margin-left: 5px;
127
}
128
 
129
// Buttons //////////////////////////////////////
130
 
131
.service-btn{
132
  .transition();
133
  border-radius: 0;
134
  margin-bottom: 0;
135
  .fa{
136
    color: #333 !important;
137
    margin-right: 3px;
138
  }
139
}
 
JavaScript 
(function(){
1
(function(){
2
 
3
  'use strict';
4
5
  var model = {
6
    'messages': [
7
      {
8
        status: 'normal',
9
        message: 'Everything is running as normal.'
10
      },
11
      {
12
        status: 'issues',
13
        message: 'We are currently experiencing issues and are working to resolve them.'
14
      },
15
      {
16
        status: 'down',
17
        message: 'This service is currently down.  We are working on the issues.'
18
      }
19
      ],
20
    'services': [      
21
      {
22
        name: 'Email',
23
        fullname: 'University Email',
24
        status: 'normal',
25
        status_type: 'email',
26
        scheduled_change: 'false',
27
        service_call_no: '',
28
        status_audience: 'All Staff & Students',
29
        url: '//www.uni.ac.uk/it/services/email/',
30
        description: 'The University email service is Office365 supported by IT.  Current Students, Applicants and Staff have access available via <a href=\"http://webmail.uni.ac.uk\">http://webmail.uni.ac.uk<\/a>'
31
      },
32
      {
33
        name: 'CMS',
34
        fullname: 'Content Management System',
35
        status: 'issues',
36
        status_type: 'website',
37
        scheduled_change: 'false',
38
        service_call_no: '67890',
39
        status_audience: 'Staff',
40
        url: '//www.uni.ac.uk/',
41
        description: 'The CMS publishes the University websites.  Issues relating to the CMS can be unrelated to University websites.  Website users should not be impacted by any disruption to this service.'
42
      },
43
      {
44
        name: 'VLE',
45
        fullname: 'Student Portal',
46
        status: 'down',
47
        status_type: 'application',
48
        scheduled_change: 'false',
49
        call_no: '67890',
50
        status_audience: 'Staff',
51
        url: '//www.uni.ac.uk/vle/',
52
        description: 'The VLE is the University\'s web-based student portal, giving our students access to learning materials, student clubs and societies, and many other resources. It also provides access to webmail.'
53
      }
54
  ]};
55
 
56
  var app = angular.module('status', [ 'ngSanitize']);
57
58
  app.filter('toTrusted', ['$sce', function($sce){
59
      return function(text) {
60
          return $sce.trustAsHtml(text);
61
      };
62
  }]);
63
 
64
  app.controller('statusCtrl', function($scope){
65
  
66
    $scope.status = model;
67
  
68
    $scope.selectedIndex = -1;
69
  
70
    // Toggle icons
71
  
72
    $scope.toggleSelect = function(ind){
73
      if(ind === $scope.selectedIndex){
74
        $scope.selectedIndex = -1;
75
      }else{
76
       $scope.selectedIndex = ind;  
77
      }
78
    }
79
    
80
    $scope.getClass = function(ind){
81
      if(ind === $scope.selectedIndex){
82
        return 'selected';
83
      }else{
84
       return '';
85
      }
86
    }
87
  
88
    $scope.getIcon = function(ind){
89
      if(ind === $scope.selectedIndex){
90
        return 'minus';
91
      }else{
92
        return 'plus';
93
      }
94
    }
95
 
96
  });
97
 
98
})();
 

Service Status

CSSDeck G+