Facebook New Feed Animating Pre-loader
Pre-loading technique is very convenient for users when the system needs some times to retrieve data from the server. It makes the user understand that the server is still busy or need some times to get the data. The technique is commonly used with Ajax request dealing with database to load new data and to refresh a specific content or block. In this tutorial, we will share about the pre-loading technique used by Facebook web application. When we talk about Facebook, you will notice about something we usually see when scrolling down the page and when we refresh its page. Its new feed/content loads using a pre-loading technique to inform its users that the feeds or text content is still loading and wait until it finish its loading. Some of you may also think Facebook may use image with GIF type for displaying that animated pre-loader. In fact, that’s not! There is a trick you should know because it’s very nice and easy. Let’s see how to make it works without GIF image!
INSTRUCTION
MySQL Database
CREATE TABLE IF NOT EXISTS `tblfeed` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL, `content` varchar(500) COLLATE utf8_unicode_ci NOT NULL, `dateTime` datetime NOT NULL, `active` int(1) NOT NULL DEFAULT '1', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
To get the pre-loading works, we will run it with Ajax request to the MySQL database. And here we have a table named tblfeed from where the data will be loaded.
Javascript File (functions.js)
function loadFeed(){
//show the pre-loader
$("#feed_preloader").css({'display':'block'});
$.post("getData.php",{cmd:'loadFeed'} ,function(data){
//hide the pre-loader
$("#feed_preloader").css({'display':'none'});
});
}
The pre-loader class style “preloader” is set to display none in default. When the “loadFeed” function runs, the pre-loader parent element is set to display block to show the pre-loader and when the Ajax complete its request, the pre-loader parent element is set to display none to hide that pre-loader. To do this, we assign ID to the pre-loader parent element as “feed_preloader”.
PHP File (getData.php)
$dbhost = "localhost";
$dbuser = "khcoder";
$dbpass = "khcoder***";
$dbname = "khcoder";
$conn = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname) or die("Error " . mysqli_error($conn));
$feedData = ‘’;
$feed_qry = exec_query_utf8("SELECT * FROM tblfeed WHERE active=1");
while($feed_row = mysqli_fetch_assoc($feed_qry)){
$feedData .= ‘<div class=”content”>’.$feed_row[‘cotent’].’</div>’;
}
echo $feedData;
In this section, to do the data query, we need to have the database connection by doing the connection configuration. However, we recommend using MySQL UTF8 Connection Using PHP, a useful function for query the UTF8 data.
The above query is just the basic data query without any styling yet. You can make your own style and how your data will be shown to the users.
HTML Script
<div style="width:500px;"> <div id="feed_preloader" class="preloader"> <div class="pr_dv1"></div> <div class="pr_dv2"></div> <div class="pr_dv3"></div> <div class="pr_dv4"></div> <div class="pr_dv5"></div> <div class="pr_dv6"></div> <div class="pr_dv7"></div> </div>
For html element, you may need a container for the pre-loader because its width is 100%. You can resize the pre-loader by adjusting its container element or its parent element. You can also add more elements or adjust the existing element to match your own requirement and design.
CSS Script
.preloader {
overflow:hidden;
display:none;
-moz-animation-duration: 1s;
-moz-animation-fill-mode: forwards;
-moz-animation-iteration-count: infinite;
-moz-animation-name: placeHolderShimmer;
-moz-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: placeHolderShimmer;
-webkit-animation-timing-function: linear;
background: #f6f7f8;
background-image: -webkit-gradient(linear, left center, right center, from(#f6f7f8), color-stop(.2, #edeef1), color-stop(.4, #f6f7f8), to(#f6f7f8));
background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
background-image: -moz-gradient(linear, left center, right center, from(#f6f7f8), color-stop(.2, #edeef1), color-stop(.4, #f6f7f8), to(#f6f7f8));
background-image: -moz-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
background-repeat: no-repeat;
background-size: 1200px 104px;
height: 80px;
width:100%;
}
@-webkit-keyframes placeHolderShimmer {
0% {background-position: -468px 0}
100% {background-position: 468px 0}
}
@-moz-keyframes placeHolderShimmer {
0% {background-position: -468px 0}
100% {background-position: 468px 0}
}
.pr_dv1{position:relative; top:0; left:60px; width:10px; height:80px; background:#ffffff;}
.pr_dv2{position:relative; top:-30px; left:0; width:60px; height:8px; background:#ffffff;}
.pr_dv3{position:relative; top:-90px; left:70px; width: 10px;height: 15px; background:#ffffff;}
.pr_dv4{position:relative; top:-90px; left:70px; width: 0;height: 0;border-top: 10px solid #ffffff;border-right: 10px solid transparent;}
.pr_dv5{position:relative; top:-90px; left:70px; width: 0;height: 0;border-bottom: 10px solid #ffffff;border-right: 10px solid transparent;}
.pr_dv6{position:relative; top:-90px; left:70px; width: 10px;height: 47px; background:#ffffff;}
.pr_dv7{position:relative; top:-120px; left:80px; width: 100%;height: 8px; background:#ffffff;}
This is the main style script where all the important animating scripts are located in. In this CSS3 script, we use keyframe named “placeHolderShimmer” to set it background color position and to make the animation works.
Beside the animating script, you also need to understand about how to decorate the Facebook pre-loading alike design. Actually the animating background color is set to the full element of its main block. With many “pr_dv” class, we use them to set in front the main block by setting a specify color, position, and shape. When all the small block’s color, position, and shape are set, the animate pre-loader is ready to use with attractive design. Hope this helpful!
