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

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

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


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

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

$(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
  }); 

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

Created: Nov 11th 2015, 10:32

Views: 3.0K

Rated 5/5 based on 2 reviews