Skeleton Screen Loading Effect

  • 16-04-2022
  • 1162
  • Jquery
  • Haresh Chauhan

Hello, Artisan

In this post, we will learn how to this skeleton effect or shimmer effect implement on your web page.

What is skeleton or shimmer effects?

It's a type of loading when you load your page you build this type of loader and showing like animation.

When you open YouTube or Facebook then you showing some time page load showing something animation when content absent.

Ex. YouTube, Facebook.

It's a very easy process to installation and useful for you. Many more websites use this type of loader effect.

So, I will guide you step by step, I will tell you what is the process of the installation shimmer, skeleton effect on your web page.

You can integrate this skeleton or shimmer effect easily with bootstrap any version and you can also integrate manually.

In this skeleton or shimmer effect is fully customizable.

So, Now we follow the below example. Let's do that.

Example

index.htm

<!DOCTYPE html>
<html>
 <head>
  <title>Shimmer Effect</title>
  <!-- placeholder-loading css  -->
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/placeholder-loading/dist/css/placeholder-loading.min.css">
  <!-- bootstrap css  -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <!-- custom css -->
  <style type="text/css">
  p{
  margin:  0;
  }
  </style>
 </head>
<body>
  <div class="shimmer">
    <div class="ph-item">
      <div class="ph-col-12">
        <div class="ph-picture"></div>
        <div class="ph-row">
          <div class="ph-col-12 big"></div>
          <div class="ph-col-12 big"></div>
          <div class="ph-col-12 big "></div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-containt container-fluid text-justify" style="display: none;">
    <div class="row p-4">
      <div class="col-lg-12">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur.
      </div>
      <div class="col-lg-4 mt-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
      <div class="col-lg-4 mt-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
      <div class="col-lg-4 mt-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
    </div>
  </div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- bootstrap popper -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<!-- bootstrap  -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  setTimeout(function(){ 

    $('.shimmer').css('display','none');
    $('.text-containt').css('display','block');

   }, 3000);
});
</script>
</body>
</html>

jQuery Lazy Load

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :