|
12 | 12 | <link href="/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> |
13 | 13 |
|
14 | 14 | <style> |
15 | | - .loading-container { |
| 15 | + .appdev-loading-container { |
16 | 16 | height: 100vh; |
17 | 17 | width: 100vw; |
18 | 18 | font-family: Helvetica; |
19 | 19 | background: rgb(0, 168, 158); |
20 | 20 | color: white; |
21 | 21 | } |
22 | 22 |
|
23 | | - .loader { |
| 23 | + .appdev-loader { |
24 | 24 | height: 20px; |
25 | 25 | width: 250px; |
26 | 26 | position: absolute; |
|
29 | 29 | left: 0; |
30 | 30 | right: 0; |
31 | 31 | margin: auto; |
32 | | - animation-name: appear; |
| 32 | + animation-name: appdev-appear; |
33 | 33 | animation-timing-function: ease-in; |
34 | 34 | animation-duration: 2s; |
35 | 35 | animation-iteration-count: 1; |
36 | 36 | } |
37 | | - .loader--dot { |
38 | | - animation-name: loader; |
| 37 | + .appdev-loader--dot { |
| 38 | + animation-name: appdev-loader; |
39 | 39 | animation-timing-function: ease-in-out; |
40 | 40 | animation-duration: 3s; |
41 | 41 | animation-iteration-count: infinite; |
|
46 | 46 | position: absolute; |
47 | 47 | /* border: 1px solid white; */ |
48 | 48 | } |
49 | | - .loader::before { |
| 49 | + .appdev-loader::before { |
50 | 50 | background-image: url(/images/appdev_logo_white.png); |
51 | 51 | background-repeat: no-repeat; |
52 | 52 | width: 450px; |
|
64 | 64 | animation-duration: 3s; |
65 | 65 | animation-iteration-count: 1; */ |
66 | 66 | } |
67 | | - .loader--dot:first-child { |
| 67 | + .appdev-loader--dot:first-child { |
68 | 68 | background-color: rgba(255,255,255,0.25); |
69 | 69 | animation-delay: 0.5s; |
70 | 70 | } |
71 | | - .loader--dot:nth-child(2) { |
| 71 | + .appdev-loader--dot:nth-child(2) { |
72 | 72 | background-color: rgba(255,255,255,0.25); |
73 | 73 | animation-delay: 0.4s; |
74 | 74 | } |
75 | | - .loader--dot:nth-child(3) { |
| 75 | + .appdev-loader--dot:nth-child(3) { |
76 | 76 | background-color: rgba(255,255,255,0.25); |
77 | 77 | animation-delay: 0.3s; |
78 | 78 | } |
79 | | - .loader--dot:nth-child(4) { |
| 79 | + .appdev-loader--dot:nth-child(4) { |
80 | 80 | background-color: rgba(255,255,255,0.25); |
81 | 81 | animation-delay: 0.2s; |
82 | 82 | } |
83 | | - .loader--dot:nth-child(5) { |
| 83 | + .appdev-loader--dot:nth-child(5) { |
84 | 84 | background-color: rgba(255,255,255,0.25); |
85 | 85 | animation-delay: 0.1s; |
86 | 86 | } |
87 | | - .loader--dot:nth-child(6) { |
| 87 | + .appdev-loader--dot:nth-child(6) { |
88 | 88 | background-color: rgba(255,255,255,0.25); |
89 | 89 | animation-delay: 0s; |
90 | 90 | } |
91 | | - .loader--text { |
| 91 | + .appdev-loader--text { |
92 | 92 | position: absolute; |
93 | 93 | top: 200%; |
94 | 94 | left: 0; |
95 | 95 | right: 0; |
96 | 96 | width: 4rem; |
97 | 97 | margin: auto; |
98 | 98 | } |
99 | | - .loader--text:after { |
| 99 | + .appdev-loader--text:after { |
100 | 100 | content: "Loading"; |
101 | 101 | font-weight: bold; |
102 | | - animation-name: loading-text; |
| 102 | + animation-name: appdev-loading-text; |
103 | 103 | animation-duration: 3s; |
104 | 104 | animation-iteration-count: infinite; |
105 | 105 | } |
106 | | - .logo { |
| 106 | + .appdev-logo { |
107 | 107 | } |
108 | 108 | |
109 | | - @keyframes appear { |
| 109 | + @keyframes appdev-appear { |
110 | 110 | 0% { |
111 | 111 | opacity: 0; |
112 | 112 | } |
|
115 | 115 | } |
116 | 116 | } |
117 | 117 |
|
118 | | - @keyframes loader { |
| 118 | + @keyframes appdev-loader { |
119 | 119 | 15% { |
120 | 120 | transform: translateX(0); |
121 | 121 | } |
|
128 | 128 | 95% { |
129 | 129 | transform: translateX(0); |
130 | 130 | } |
131 | | - } |
132 | | - @keyframes loading-text { |
| 131 | + } |
| 132 | + @keyframes appdev-loading-text { |
133 | 133 | 0% { |
134 | 134 | content: "Loading"; |
135 | 135 | } |
|
149 | 149 | <body> |
150 | 150 |
|
151 | 151 |
|
152 | | - <div class="loading-container"> |
153 | | - <div class="loader"> |
154 | | - <div class="loader--dot"></div> |
155 | | - <div class="loader--dot"></div> |
156 | | - <div class="loader--dot"></div> |
157 | | - <div class="loader--dot"></div> |
158 | | - <div class="loader--dot"></div> |
159 | | - <div class="loader--dot"></div> |
160 | | - <div class="loader--text"></div> |
| 152 | + <div class="appdev-loading-container"> |
| 153 | + <div class="appdev-loader"> |
| 154 | + <div class="appdev-loader--dot"></div> |
| 155 | + <div class="appdev-loader--dot"></div> |
| 156 | + <div class="appdev-loader--dot"></div> |
| 157 | + <div class="appdev-loader--dot"></div> |
| 158 | + <div class="appdev-loader--dot"></div> |
| 159 | + <div class="appdev-loader--dot"></div> |
| 160 | + <div class="appdev-loader--text"></div> |
161 | 161 | </div> |
162 | 162 | </div> |
163 | 163 | <div appdev-opsportal="default" portal-autoenter="true" ></div> |
|
0 commit comments