Connecting to server loader

about.markdown

Connecting-to-server loader

Pilfered from twitter.com/kushal_expert | facebook.com/Kushal.a.sunkur for more graphic, webgl, html5, css, php, JavaScript, jquery, and more.

index.html

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<div class="server">
  <img src="https://apexminecrafthosting.com/wp-content/uploads/2014/01/apex_server.gif" id="pen" />
  <p>Connecting to server ...</p>
</div>

scripts

<script src="https://kushalexpert.github.io/webgl/script.js"></script>

style.css

body,
html {
  background: linear-gradient(#1A1C1D, #0b3a59);
  color: #fff;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  position: absolute;
  margin-left: 50%;
  left: -150px;
}

p {
  color: #0695e2;
  font: 200 18px/1.5 'Pacifico', Helvetica, sans-serif;
  
  text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
}

.server {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#pen {
  width: 15%;
  animation: wiggle 0.82s cubic-bezier(.36, .07, .19, .97) infinite;
}

.mypen{
  
  font-size: 14px;
  width:120px;
  border:none;
  padding: 5px 5px 5px 20px;
  color: #ffffff;
background: #4598d0;
background: linear-gradient(-45deg, transparent 7px, #4598d0 7px);
      position: absolute;
    top:5px;
    left: 0px;
    z-index: 999999;
}

styles

<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" />