241 lines
7.3 KiB
HTML
241 lines
7.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Start Server, please wait</title>
|
|
|
|
<link href="./application.css" rel="stylesheet" type="text/css">
|
|
|
|
<style>
|
|
.claro{
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.actionToolbarButtonElusive{
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
</style>
|
|
<style type='text/css'>
|
|
BODY{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
|
#loader {
|
|
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
|
|
color: #5aacca;
|
|
font-size: 16px;
|
|
background-color: #ffffff;
|
|
padding: 0;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: table;
|
|
/*opacity: 0.5;*/
|
|
/*max-height:750px;*/
|
|
text-align: center;
|
|
z-index: 999;
|
|
vertical-align: middle;
|
|
}
|
|
#loaderInner {
|
|
color: #5AACCA;
|
|
display: block;
|
|
/*left: 10%;*/
|
|
/*margin-top: 50% !important;*/
|
|
padding: 5px;
|
|
position: relative;
|
|
text-align: center;
|
|
width: 100%;
|
|
top: 76% !important;
|
|
/*padding:5px;
|
|
position:absolute;
|
|
left:10%;
|
|
top:76%;
|
|
width:275px;
|
|
*/
|
|
font-size: 21px;
|
|
color: #5aacca;
|
|
/*display: table-cell;*/
|
|
/*vertical-align: middle;*/
|
|
/*margin: 0 auto;*/
|
|
}
|
|
#heading-inner {
|
|
width: 100%;
|
|
}
|
|
/**Loader new **/
|
|
.loaderProgContainer {
|
|
background-color: #000000;
|
|
border: 2px solid #000000;
|
|
border-radius: 5px;
|
|
color: rgba(45, 44, 44, 0.898);
|
|
height: 80px !important;
|
|
left: 50%;
|
|
top: 65%;
|
|
width: 80px !important;
|
|
}
|
|
.loaderProgContainer {
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
/** Loading indicator : new ! */
|
|
/* Loading indicator */
|
|
.loadingWrapper {
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 999999;
|
|
width: 100%;
|
|
top: 36%;
|
|
display: inline-block;
|
|
}
|
|
.loading {
|
|
position: relative !important;
|
|
width: 72px !important;
|
|
/* diameter */
|
|
height: 72px !important;
|
|
/* diameter */
|
|
margin: 0 auto;
|
|
}
|
|
.loadingWrapper .outer, .inner, .loading:after {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
/* Mask */
|
|
.loadingWrapper .loading:after {
|
|
margin: 10%;
|
|
/* stroke width */
|
|
border-radius: 100%;
|
|
background: #888;
|
|
/* container background */
|
|
color: #FFFFFF;
|
|
content: "Boot Servers";
|
|
font-size: 10px;
|
|
padding-top: 21px;
|
|
text-align: center;
|
|
}
|
|
/* Spinning gradients */
|
|
.loadingWrapper .outer, .inner {
|
|
animation-duration: 5s;
|
|
/* speed */
|
|
-webkit-animation-duration: 5s;
|
|
/* speed */
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
-webkit-animation-timing-function: linear;
|
|
}
|
|
.loadingWrapper .outer {
|
|
animation-name: rotate-outer;
|
|
-webkit-animation-name: rotate-outer;
|
|
}
|
|
.loadingWrapper .inner {
|
|
animation-name: rotate-inner;
|
|
-webkit-animation-name: rotate-inner;
|
|
}
|
|
/* Halfs */
|
|
.loadingWrapper .outer:before, .inner:before, .outer:after, .inner:after {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
content: " ";
|
|
}
|
|
/* Left half */
|
|
.loadingWrapper .outer:before, .inner:before {
|
|
left: 0;
|
|
right: 50%;
|
|
border-radius: 72px 0 0 72px;
|
|
/* diameter */
|
|
}
|
|
/* Right half */
|
|
.loadingWrapper .outer:after, .inner:after {
|
|
left: 50%;
|
|
right: 0;
|
|
border-radius: 0 72px 72px 0;
|
|
/* diameter */
|
|
}
|
|
/* Half gradients */
|
|
.loadingWrapper .outer:before {
|
|
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
|
|
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
|
|
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
|
|
}
|
|
.loadingWrapper .outer:after {
|
|
background-image: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0.5));
|
|
background-image: -moz-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0.5));
|
|
background-image: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.5));
|
|
}
|
|
.loadingWrapper .inner:before {
|
|
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(191, 191, 191, 0.5));
|
|
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(191, 191, 191, 0.5));
|
|
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(191, 191, 191, 0.5));
|
|
}
|
|
.loadingWrapper .inner:after {
|
|
background-image: -webkit-linear-gradient(top, rgba(128, 128, 128, 0.5), rgba(191, 191, 191, 0.5));
|
|
background-image: -moz-linear-gradient(top, rgba(128, 128, 128, 0.5), rgba(191, 191, 191, 0.5));
|
|
background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.5), rgba(191, 191, 191, 0.5));
|
|
}
|
|
/* Spinning animations */
|
|
@keyframes rotate-outer {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(1080deg);
|
|
-moz-transform: rotate(1080deg);
|
|
-webkit-transform: rotate(1080deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes rotate-outer {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(1080deg);
|
|
}
|
|
}
|
|
@keyframes rotate-inner {
|
|
0% {
|
|
transform: rotate(720deg);
|
|
-moz-transform: rotate(720deg);
|
|
-webkit-transform: rotate(720deg);
|
|
}
|
|
100% {
|
|
transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes rotate-inner {
|
|
0% {
|
|
-webkit-transform: rotate(720deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="loadingWrapper" id="loadingWrapper">
|
|
<div class="loading">
|
|
<div class="outer"></div>
|
|
<div class="inner"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|