load page indicator

This bootstrap snippet called "load page indicator" 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,loading,indicator

This is the HTML code for this bootstrap snippet

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

<div class="loading-container">
    <div class="loading-progress">
        <div class="rotator">
            <div class="rotator">
                <div class="rotator colored">
                    <div class="rotator">
                        <div class="rotator colored">
                            <div class="rotator colored"></div>
                            <div class="rotator"></div>
                        </div>
                        <div class="rotator colored"></div>
                    </div>
                    <div class="rotator"></div>
                </div>
                <div class="rotator"></div>
            </div>
            <div class="rotator"></div>
        </div>
        <div class="rotator"></div>
    </div>
</div>
<div class="container bootstrap snippets">
    <div class="jumbotron">
		<h1 id="loading-text">Loading...</h1>
	</div>
</div>

This is the CSS code for this bootstrap snippet

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

body{margin-top:20px;}


/* ------------------------ LOADING ----------------*/
@-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
    0% {
      -moz-transform: rotate(0deg);
  }
  100% {
      -moz-transform: rotate(360deg);
  }
}
@-o-keyframes spin {
    0% {
      -o-transform: rotate(0deg);
  }
  100% {
      -o-transform: rotate(360deg);
  }
}
@keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}
.loading-container {
    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .55);
}
.loading-container.loading-inactive {
    display: none;
}
.loading-container.loading-inactive .loading-progress {
    display: none;
}
.loading-container .loading-progress {
    z-index: 2000;
    position: fixed;
    height: 10px;
    width: 10px;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.loading-container .loading-progress .rotator {
    -webkit-animation: spin 30s infinite linear;
    -moz-animation: spin 30s infinite linear;
    -o-animation: spin 30s infinite linear;
    animation: spin 30s infinite linear;
}
.loading-container .loading-progress>.rotator {
    left: -100px;
}
.loading-container .rotator {
    -webkit-background-origin: border-box;
    -moz-background-origin: border-box;
    background-origin: border-box;
    background-color: #fff;
    width: 200px;
    height: 7px;
    opacity: .75;
    position: absolute;
    top: 0;
    left: 0;
}
.loading-container .colored {
    background-color: #2dc3e8!important;
}
                                    

This is the JS code for this bootstrap snippet

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

$(window)
  .load(function () {
      setTimeout(function () {
          $('.loading-container')
              .addClass('loading-inactive');
              /*in production, remove this line*/
              $("#loading-text").addClass('text-success').html('page loaded');
      }, 8000);//in production change 8000 to 0
  }); 

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Nov 11th 2015, 10:32

Views: 2.8K

Rated 5/5 based on 1 reviews