1 |
|
2 |
|
3 |
|
4 | <template>
|
5 | <div class="center panel panel-default">
|
6 | <div class="panel-heading">
|
7 | <h3 class="panel-title">{{ status }}</h3>
|
8 | </div>
|
9 | <div class="panel-body">
|
10 | <slot name="statusOverride">
|
11 | {{ message }}
|
12 | </slot>
|
13 | </div>
|
14 | </div>
|
15 | </template>
|
16 |
|
17 | <script>
|
18 | export default {
|
19 | name: 'ConnectionStatus',
|
20 | props: ['status', 'options', 'message']
|
21 | }
|
22 | </script>
|
23 |
|
24 | <style>
|
25 | .center{
|
26 | margin: auto;
|
27 | position: relative;
|
28 | top: 0; left: 0; bottom: 0; right: 0;
|
29 | height: 125px;
|
30 | width: 400px;
|
31 | background-color: #e8e8e8;
|
32 | }
|
33 |
|
34 | .guac-client-loader {
|
35 | border: 16px solid #f3f3f3;
|
36 | border-top: 16px solid #3498db;
|
37 | border-radius: 50%;
|
38 | width: 120px;
|
39 | height: 120px;
|
40 | animation: guac-client-spin 2s linear infinite;
|
41 | }
|
42 |
|
43 | @keyframes guac-client-spin {
|
44 | 0% { transform: rotate(0deg); }
|
45 | 100% { transform: rotate(360deg); }
|
46 | }
|
47 | </style>
|