infinite page loader

This bootstrap snippet called "infinite page loader" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: page,loader

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<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>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

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;
  }

                                    

Javascript/Jquery code

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview selection



$(function(){
    $(window).load(function() {
        //on production change 3000 to 500
        $('.pageloader').delay(3000).slideUp(800);
        $("#loading-text").addClass('text-success').html('page loaded');
    })
})
 

Similar snippets

Bootstrap snippet bs4 profile with messages and edit

bs4 profile with messages and edit

View

Bootstrap snippet bs4 alpha Dynamic Loading progress Bar

bs4 alpha Dynamic Loading progress Bar

View

Bootstrap snippet simple page result

simple page result

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 7th 2016, 23:15

Views: 4.0K

Rated 5/5 based on 3 reviews