Create PHP Skeleton Loading Effect With Ajax

Create PHP Skeleton Loading Effect With Ajax

Skeleton loading effect or shimmer effect is a common feature in modern websites. It is shown just before loading the data on page. The effect makes design more user friendly to replace conventional content loading feature using mysql ajax php.

We will use placeholder-loading CSS library to load Skeleton content with animation effect. So we will cover this tutorial step by step with live demo to create effect with CSS library using Bootstrap and display data with Ajax.

What is it ?

what does a page using skeleton loading look like? In fact, you see them on every platform: Twitter, YouTube, Netflix… Below you can see glimpses of skeleton loading on various websites mentioned above.

As you can see, skeleton loading is used by high profile sites for a reason: it allows the user to directly understand where and how the information will be organized after loading.

Database

--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_post`
--

CREATE TABLE `tbl_post` (
  `id` mediumint(8) UNSIGNED NOT NULL,
  `post_title` text,
  `post_description` text,
  `author` varchar(255) DEFAULT NULL,
  `datetime` datetime DEFAULT NULL,
  `post_image` varchar(150) DEFAULT NULL,
  `post_url` varchar(150) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_post`
--
ALTER TABLE `tbl_post`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_post`
--
ALTER TABLE `tbl_post`
  MODIFY `id` mediumint(8) UNSIGNED NOT NULL AUTO_INCREMENT;

index.php

Create a index page to build your application. Post Below code

<!DOCTYPE html>
<html>
  <head>
    <title>Make Skeleton Loader with PHP Ajax using Bootstrap</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
  </head>
  <body>
    <br />
    <div class="container">
      <h3 align="center">Make Skeleton Loader with PHP Ajax using Bootstrap</h3>
      <br />
      <div class="card">
        <div class="card-header">Dynamic Data</div>
        <div class="card-body" id="dynamic_content">
          
        </div>
      </div>
    </div>

    <script src="sctipt.js"></script>
  </body>
</html>

Script.js

Create your JavaScript page

$(document).ready(function(){

    $('#dynamic_content').html(make_skeleton());

    setTimeout(function(){
      load_content(5);
    }, 5000);

    function make_skeleton()
    {
      var output = '';
      for(var count = 0; count < 5; count++)
      {
        output += '<div class="ph-item">';
        output += '<div class="ph-col-4">';
        output += '<div class="ph-picture"></div>';
        output += '</div>';
        output += '<div>';
        output += '<div class="ph-row">';
        output += '<div class="ph-col-12 big"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '</div>';
        output += '</div>';
        output += '</div>';
      }
      return output;
    }

    function load_content(limit)
    {
      $.ajax({
        url:"fetch.php",
        method:"POST",
        data:{limit:limit},
        success:function(data)
        {
          $('#dynamic_content').html(data);
        }
      })
    }

  });

fetch.php

Now create fetch.php page to get your database post

<?php

//fetch.php;

$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

if(isset($_POST['limit']))
{
 $query = "
 SELECT * FROM tbl_post 
 ORDER BY id DESC 
 LIMIT ".$_POST["limit"]."
 ";

 $statement = $connect->prepare($query);

 $statement->execute();

 $result = $statement->fetchAll();

 $output = '';

 foreach($result as $row)
 {
  $output .= '
  <div class="row">
   <div class="col-md-4">
    <img src="images/'.$row["post_image"].'" class="img-thumbnail" />
   </div>
   <div class="col-md-8">
    <h2><a href="'.$row["post_url"].'">'.$row["post_title"].'</a></h2>
    <br />
    <p>'.$row["post_description"].'</p>
   </div>
  </div>
  <hr />
  ';
 }

 echo $output;
}

?>
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply