Pace.js Automatic page load progress bar

Pace.js Automatic page load progress bar


SHARE & COMMENT
[php snippet=1]

As a user, we always like feedback of what’s happening when we go to a site, click on a link, submit a form or simply how fast a site is loading. A few months ago, we saw how YouTube implemented a revolutionary way of indicating that something is happening; in a stylish way without creating too much distraction for the user. In this case, a subtle red loading bar on top of the page, indicating that the page is loading and some action is being processed by the server, is enough to deliver the message and give the impression of things loading faster (at least that’s my impression).

Now, with Pace.js, you can incorporate the page load progress bar into your own page. The beauty of Pace.js is that you do not need to hook into any of your code, progress is detected automatically by the plugin. Pace.js will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. When an ajax navigation or a pushState event takes place, the progress bar will also be restarted again.

Getting Started

Pace.js is very easy to install. You will have to include the .js file and the theme (css) of your choice as early as possible on your page:

<script src="pace.min.js"></script>
<link href="pace-theme-corner-indicator.css" rel="stylesheet" />

Note that Pace.js does not require JQuery, a great advantage in terms of performance and seamless loading animation.

Themes

You can choose between a few out-of-the-box themes available. These are created purely in css and you can create your own in just a few steps. For this tutorial, I included a few examples that you can take a look at and see them running in this page:

Minimal See it in action

.pace .pace-progress {
 background: #76c276;
 position: fixed;
 z-index: 2000;
 top: 0;
 left: 0;
 height: 2px;

 -webkit-transition: width 1s;
 -moz-transition: width 1s;
 -o-transition: width 1s;
 transition: width 1s;
}

.pace-inactive {
 display: none;
}

Corner Indicator See it in action

.pace {
 -webkit-pointer-events: none;
 pointer-events: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 user-select: none;
}

.pace .pace-activity {
 display: block;
 position: fixed;
 z-index: 2000;
 top: 0;
 right: 0;
 width: 300px;
 height: 300px;
 background: #76c276;
 -webkit-transition: -webkit-transform 0.3s;
 transition: transform 0.3s;
 -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
 transform: translateX(100%) translateY(-100%) rotate(45deg);
 pointer-events: none;
}

.pace.pace-active .pace-activity {
 -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
 transform: translateX(50%) translateY(-50%) rotate(45deg);
}

.pace .pace-activity::before,
.pace .pace-activity::after {
 position: absolute;
 bottom: 30px;
 left: 50%;
 display: block;
 border: 5px solid #fff;
 border-radius: 50%;
 content: '';
}

.pace .pace-activity::before {
 margin-left: -40px;
 width: 80px;
 height: 80px;
 border-right-color: rgba(0, 0, 0, .2);
 border-left-color: rgba(0, 0, 0, .2);
 -webkit-animation: pace-rotation 3s linear infinite;
 animation: pace-rotation 3s linear infinite;
}

.pace .pace-activity::after {
 bottom: 50px;
 margin-left: -20px;
 width: 40px;
 height: 40px;
 border-top-color: rgba(0, 0, 0, .2);
 border-bottom-color: rgba(0, 0, 0, .2);
 -webkit-animation: pace-rotation 1s linear infinite;
 animation: pace-rotation 1s linear infinite;
}

@-webkit-keyframes pace-rotation {
 0% { -webkit-transform: rotate(0deg); }
 100% { -webkit-transform: rotate(359deg); }
}
@keyframes pace-rotation {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(359deg); }
}

 Center Circle See it in action

.pace {
 -webkit-pointer-events: none;
 pointer-events: none;

 -webkit-user-select: none;
 -moz-user-select: none;
 user-select: none;

 -webkit-perspective: 12rem;
 -moz-perspective: 12rem;
 -ms-perspective: 12rem;
 -o-perspective: 12rem;
 perspective: 12rem;

 z-index: 2000;
 position: fixed;
 height: 6rem;
 width: 6rem;
 margin: auto;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}

.pace.pace-inactive .pace-progress {
 display: none;
}

.pace .pace-progress {
 position: fixed;
 z-index: 2000;
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 height: 6rem;
 width: 6rem !important;
 line-height: 6rem;
 font-size: 2rem;
 border-radius: 50%;
 background: rgba(118, 194, 118, 0.8);
 color: #fff;
 font-family: "Helvetica Neue", sans-serif;
 font-weight: 100;
 text-align: center;

 -webkit-animation: pace-3d-spinner linear infinite 2s;
 -moz-animation: pace-3d-spinner linear infinite 2s;
 -ms-animation: pace-3d-spinner linear infinite 2s;
 -o-animation: pace-3d-spinner linear infinite 2s;
 animation: pace-3d-spinner linear infinite 2s;

 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

.pace .pace-progress:after {
 content: attr(data-progress-text);
 display: block;
}

@-webkit-keyframes pace-3d-spinner {
 from {
 -webkit-transform: rotateY(0deg);
 }
 to {
 -webkit-transform: rotateY(360deg);
 }
}

@-moz-keyframes pace-3d-spinner {
 from {
 -moz-transform: rotateY(0deg);
 }
 to {
 -moz-transform: rotateY(360deg);
 }
}

@-ms-keyframes pace-3d-spinner {
 from {
 -ms-transform: rotateY(0deg);
 }
 to {
 -ms-transform: rotateY(360deg);
 }
}

@-o-keyframes pace-3d-spinner {
 from {
 -o-transform: rotateY(0deg);
 }
 to {
 -o-transform: rotateY(360deg);
 }
}

@keyframes pace-3d-spinner {
 from {
 transform: rotateY(0deg);
 }
 to {
 transform: rotateY(360deg);
 }
}

Support

Pace.js is designed to support IE8+ (standards mode), FF 3.5+, Chrome, Safari 4+, Opera 10.5+, and all modern mobile browsers.

Final Thought

If user experience is one of your main goals in your site or app, you should definitely consider adding Pace.js to your toolset. Because of its simplicity and robustness, now you don’t have to worry about difficulties in implementing a loading page progress bar into your site.

Reference

SHARE & COMMENT