Bootstrap snippet: infinite page loader

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: page,loader



<div class="pageloader gray-bg"> <div class="loader"> <span>Bootdey</span> <div class="sp-hydrogen"></div> </div> </div> <div class="container bootstrap snippets"> <div class="jumbotron"> <h1 id="loading-text">Loading...</h1> </div> </div>
body{ margin-top:20px; } .gray-bg{ background:#eee; } .pageloader { position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; z-index: 1000000; opacity:1; overflow: hidden; display: table; } .loader { text-align: center; display: table-cell; vertical-align: middle; } .loader span{ color: #1ABC9C; font-weight: 300; font-size: 60px; display: block; margin-top: 40px; } .sp-hydrogen { width: 96px; height: 96px; clear: both; margin: 60px auto; position: relative; border: 3px #1ABC9C solid; border-radius: 50%; -webkit-animation: spHydro 0.7s infinite linear; animation: spHydro 0.7s infinite linear; } .sp-hydrogen:before, .sp-hydrogen:after { content: ''; position: absolute; width: 30px; height: 30px; background-color: #252830; border-radius: 50%; } .sp-hydrogen:before { top: calc( 50% - 15px ); left: calc( 50% - 15px ); } .sp-hydrogen:after { top: -3px; left: -3px; } @-webkit-keyframes spHydro { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @keyframes spHydro { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; }
$(function(){ $(window).load(function() { //on production change 3000 to 500 $('.pageloader').delay(3000).slideUp(800); $("#loading-text").addClass('text-success').html('page loaded'); }) })
Dey-Dey

infinite page loader

Dey-Dey
  Jun 14th, 15:22
2.3K Views