Robo LoaderはCSSとjQueryを使って作成したウェブサイトのプリローダー。

  <pre id = "style-text"></pre>
  
  <div class="loader">
	<p class="loading"></p>
	<p class="dots"></p>
  </div>
  
<pre id="style-hidden" style="display:none;">


/* Hi its Chandresh Kanani (cskanani)
 * Building Robo Loader 
 * So, lets get going */

body {
  margin: 0px;
  background-color: #1a1c24; color: #fff;
  font-size: 13px; line-height: 1.4;
  position: fixed;
  top: 0%;
  left:0%;  
}

/* Let's wrap CSS in a box */

pre { 
  position: fixed;
  width: 48%;
  height: 100vh;
  bottom:0%;
  margin: 0px;
  overflow: auto;
  background-color: #313744; color: #a6c3d4;
  padding: 12px 12px;
}

/* Giving color to CSS */

.comment       { color: #707e84; }
.selector      { color: #c66c75; }
.selector .key { color: #c66c75; }
.key           { color: #c7ccd4; }
.value         { color: #d5927b; }

/* Shifting CSS to right */

pre { 
  left: 50%;
}

/* Aligning CSS to bottom for smaller screens */

@media (max-width: 768px) {
  pre {
    bottom: 0px !important;
    left: 0% !important;
    width: 100%;
    height: 50vh;
  }
}

p {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  margin: 0px;
}

/* Add loading text */

.loading::before {
  content: "loading";
}
.dots::before {
  content: "...";
}

/* Making text bigger
 * Aligning it in center */

.loader {
  font-size: 40px;
  width: 200px;
  position: fixed;
  top:50vh;
  left: 25%;
  transform: translate(-50%,-50%);
}

/* Aligning loader to top for smaller screens */

@media (max-width: 768px) {
  .loader {
    top: 25vh;
    left: 50%;
  }
}

.dots {
/* Assigning animation effect */
  animation: type 3s steps(60, end) infinite;
}

/* Animation keyframes */

@keyframes type {
  0%   { width: 0px;  }
  25%  { width: 20px; }
  50%  { width: 40px; }
  75%  { width: 20px; }
  100% { width: 0px;  }
}

</pre>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
  <script type="text/javascript" src="js/main.js"></script>

MIT

• Tag
• Animations
• jQuery