jQuery
【jQuery】CSSとjQueryを使って作成したウェブサイトのプリローダーRobo Loader
December 17, 2016

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
Download