2022-11-04 14:32:55 +00:00

136 lines
3.2 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Important: cache busting for index.html -->
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<title>ACS APS ADF Application with Angular CLI</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<style>
body,
html {
height: 100%;
}
.app-loader-container {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: center;
}
.app-loader-item {
max-height: 100px;
max-width: 300px;
}
.app-loader-spinner {
max-height: 300px;
max-width: 300px;
}
.app-loader-text {
white-space: nowrap;
text-align: center;
position: relative;
}
.app-loader {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.app-circular {
animation: rotate 2s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.app-path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke: #b6463a;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
@keyframes color {
100%,
0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
</style>
</head>
<body class="app-background-color">
<app-root>
<div id="loader-container" class="app-loader-container">
<div class="app-loader-spinner">
<svg class="app-circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10">
</circle>
</svg>
</div>
<div class="app-loader-item">
<div id="loader-text" class="app-loader-text">Loading Demo Shell..</div>
</div>
</div>
</app-root>
</body>
</html>