[Developer says] Creating a slim page loader

2016-07-15 nianiak Developers say

Hi!

I couldn’t find a better idea for this blogpost so I ended up with this.

Inspired from the page loaders that YouTube and GitHub uses, I thought I'd write something that resembles them.

The process is to create a div element that will represent the loader and absolute position it on top of the page.

The initial width of the loader should be 0, which will increase as the page loading progresses.

Once the loading has been completed, the loader width is 100% and eventually hides from the page.

I used jQuery’s animate function to control the width of the loader on this demo, but it can be replaced to represent an actual loading progress of the page.

I also added a shadow pulse in the loader, controlled by a CSS animation, to make the progress easier to be followed by the eye.

Putting the above into code:

<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Loader demo</title>

 <style>
 html,
 body {
   width: 100%;
   height: 100%;
   margin: 0;
 }

 #container {
   width: 100%;
   height: 100%;
 }

 #loader {
   width: 0;
   height: 2px;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #00fa00;

   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-name: pulse;
 }

 @keyframes pulse {
   from {
     box-shadow: 1px 1px 1px 1px rgba(0, 128, 0, 0);
   }

   50% {
     box-shadow: 1px 1px 1px 1px rgba(0, 128, 0, 0.5);
   }

   to {
     box-shadow: 1px 1px 1px 1px rgba(0, 128, 0, 0);
   }
 }
 </style>
</head>
<body>
 <div id="container">
   <div id="loader"></div>
 </div>

 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <script>
   $(function () {
     $('#loader').animate({
       width: '100%'
     }, 5000, function () {
       $(this).fadeOut(1000);
     });
   });
 </script>
</body>
</html>

Has a visual result:

Thanks for stopping by and reading.

[Developer says] Creating a slim page loader

Article Tags

Categories

Archives