8/9

<style>
@import url('https://fonts.googleapis.com/css?family=Orbitron&display=swap');

body {
	background-color: #ccc;
	background-image: url('') ;
	background-position: fixed;
 background-size: 60%;
	background-repeat:no-repeat;
	background-position: left bottom;

}

::-webkit-scrollbar {
 width: 5px;
}

::-webkit-scrollbar-track {
 box-shadow: inset 0 0 5px grey;
 border-radius: 10px;
}

::-webkit-scrollbar-thumb {
 background: #26121E;
 border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
 background: #4f3d47;
}

h1 {
 font-size: 40px;
 font-color: fff;
}

div.bar1 {
 width: 0px;
 height: 15px;
 bottom: 70%;
 left: 0.5%;
 position: absolute;
 background-color: fff;
 animation-name: bar1;
 animation-duration: 4s;
 animation-iteration-count: ;
}

div.bar2 {
 width: 0px;
 height: 15px;
 bottom: 65%;
 left: 0.5%;
 position: absolute;
 background-color: fff;
 animation-name: bar2;
 animation-duration: 4s;
 animation-iteration-count: ;
 animation-delay: .5s;
}

div.bar3 {
 width: 0px;
 height: 15px;
 bottom: 50%;
 left: 0.5%;
 position: absolute;
 background-color: fff;
 animation-name: bar2;
 animation-duration: 4s;
 animation-iteration-count: ;
 animation-delay: 1s;
}

div.bar4 {
 width: 0px;
 height: 15px;
 bottom: 45%;
 left: 0.5%;
 position: absolute;
 background-color: fff;
 animation-name: bar2;
 animation-duration: 4s;
 animation-iteration-count: ;
 animation-delay: 1.5s;
}

div.loading{
 height: 15px;
 bottom: 63%;
 left: 0.5%;
 font-family: 'Orbitron', sans-serif;
 opacity: 0;
 position: absolute;
 animation-name: loading;
 animation-duration: 5.5s;
 animation-iteration-count: ;
 animation-delay: s;
}

div.loadingdone{
 height: 15px;
 bottom: 63%;
 left: 0.5%;
 font-family: 'Orbitron', sans-serif;
 opacity: 0;
 position: absolute;
 animation-name: loadingdone;
 animation-duration: 5.5s;
 animation-iteration-count: ;
 animation-delay: 5s;
}

div.mainbar{
 width: 0px;
 height: 30px;
 bottom: 65%;
 left: 0.5%;
 position: absolute;
 background-color: bbb;
 animation-name: mainbar;
 animation-duration: 4s;
 animation-iteration-count: ;
 animation-fill-mode: forwards;
 animation-delay: 6s;
}

div.button {
 background-color: #4CAF50; /* Green */
 border: none;
 color: white;
 padding: 16px 32px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 transition-duration: 0.4s;
 cursor: pointer;
}



div.eight{
 width: 500px;
 height: 500px;
 bottom: 20%;
 left: 10%;
 opacity: 0;
 position: absolute;
 animation-name: eight;
 animation-duration: 4s;
 animation-iteration-count: ;
 animation-fill-mode: forwards;
 animation-delay: 10s;
}

div.nine{
 width: 500px;
 height: 500px;
 bottom: 20%;
 left: 60%;
 opacity: 0;
 position: absolute;
 animation-name: nine;
 animation-duration: 4s;
 animation-iteration-count: ;
 animation-fill-mode: forwards;
 animation-delay: 10s;
}

.box {position:absolute;
margin:auto; top:0;bottom:0;left:0; right:30;
 height: 230;
 width: 226;
 background-color: #000;
 border-left: px solid #f3f3f3;
 box-shadow: #000000 0px 0px 0px 0px;
 background-image:url("");
 color: #000;
 font-family: Roboto;
 font-style: normal;
 font-variant: ;
 font-weight: 100;
 text-align: justify;
 overflow-x: hidden;
 overflow-y: auto;
 font-size: 11px;
 padding-left: 10px;
-webkit-transition: all 0.4s ease-out;
 transition: all 0.4s ease-out;
opacity: 0;
filter:alpha(opacity=75);
}


@keyframes bar1{
 0% {width: 0px;}
 100% {width: 1000px;}
}

@keyframes bar2{
 0% {width: 0px;}
 100% {width: 1000px;}
}

@keyframes bar3{
 0% {width: 0px;}
 100% {width: 1000px;}
}


@keyframes bar4{
 0% {width: 0px;}
 100% {width: 1000px;}
}

@keyframes loading{
 0% {opacity: 0;}
 50% {opacity: 1;}
 100% {opacity: 0;}
}

@keyframes loadingdone{
 0% {opacity: 0;}
 50% {opacity: 1;}
 100% {opacity: 0;}
}

@keyframes mainbar{
 0% {width: 0%;}
 100% {width: 99%}
}

@keyframes eight{
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes nine{
 0% {opacity: 0;}
 100% {opacity: 1;}
}


</style>
<body>

<div class="bar1"></div>

<div class="bar2"></div>

<div class="bar3"></div>

<div class="bar4"></div>

<div class="loading">
<h1><font color="ffffff">Now Loading...</font></h1>
</div>

<div class="loadingdone">
<h1><font color="ffffff">Load Complete</font></h1>
</div>

<div class="mainbar"></div>

<div class="eight">
<img src="http://i.picpar.com/xuyd.png" width="400" >
</div>

<div class="nine">
<img src="http://i.picpar.com/zuyd.png" width="400" >
</div>



<div class="box" STYLE="position:fixed;margin:auto; top:320;right:0;height:315; border-right: 1px solid #000; border-bottom: 1px solid #000; padding-right: 10px;padding-left: 4px;">

 </div>

</body>
</body>
</html>