| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>LogSearch</title> |
| <base href="/"> |
| |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link rel="icon" type="image/x-icon" href="favicon.ico"> |
| <style> |
| body { |
| background-color: #ECECEC; |
| } |
| .spinner { |
| width: 40px; |
| height: 40px; |
| background-color: #3FAE2A; |
| |
| -webkit-animation: rotateplane 1.2s infinite ease-in-out; |
| animation: rotateplane 1.2s infinite ease-in-out; |
| } |
| |
| @-webkit-keyframes rotateplane { |
| 0% { -webkit-transform: perspective(120px) } |
| 50% { -webkit-transform: perspective(120px) rotateY(180deg) } |
| 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } |
| } |
| |
| @keyframes rotateplane { |
| 0% { |
| transform: perspective(120px) rotateX(0deg) rotateY(0deg); |
| -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) |
| } 50% { |
| transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); |
| -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) |
| } 100% { |
| transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); |
| -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); |
| } |
| } |
| .indicator-wrapper { |
| align-items: center; |
| display: flex; |
| flex-direction: column; |
| height: 100vh; |
| justify-content: center; |
| } |
| .indicator-wrapper div { |
| margin: .5em 0; |
| } |
| </style> |
| </head> |
| <body> |
| <app-root> |
| <div class="indicator-wrapper"> |
| <div>Loading Log Search...</div> |
| <div class="spinner"></div> |
| </div> |
| </app-root> |
| </body> |
| </html> |