• Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • Youtube
    • Instagram
    • RSS
Skeleton Screen Loading Animation using HTML and CSS
Home
CSS

Skeleton Screen Loading Animation using HTML and CSS

February 7th, 2022 Huzoor Bux CSS, HTML 0 comments

Facebook Twitter Google+ LinkedIn Pinterest

This post explains what Skeleton Screen Loading Animation is constructed using HTML, CSS, and JavaScript. I made this animation for a blog card.

Many websites show Skeleton Loading Animation before loading any part. Certainly, it improves the aesthetics and quality of the site. However, it is essential to know the basics regarding HTML and CSS to create it.

DEMO
DOWNLOAD CODE

Check out its live demonstration to find out how it functions. I’ve shown this type of effect before, but it wasn’t very effective. In this instance, I’ve employed JavaScript to achieve this effect.

It is a Skeleton Screen Loading Animation running for 3 seconds each time you visit the website. After 3 seconds, the effect will stop, and all information on your post can be visible.

First of all, create a blog posts card here. I have used a tailwindcss blog card and added a post from PHPLift.net. You can do it as per your requirement. It’s very simple and easy to understand.

<div class="blog-card skeleton mt-3">
  <div class="max-w-lg mx-auto">
    <div class=" bg-white shadow-md border border-gray-200 rounded-lg max-w-sm mb-5">
      <div class="blogimage"></div>
      <div class="p-5">
        <a href="https://www.phplift.net/10-best-php-frameworks-for-web-development-in-2021/">
          <h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2 hide-text">10 Best PHP Frameworks For Web Development In 2021</h5>
        </a>
        <p class="font-normal text-gray-700 mb-3 hide-text">Are you wondering what PHP framework will be the best to develop web applications in 2021? If so, then you're in exactly the right spot.</p>
        <a class="hide-text text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center" href="https://www.phplift.net/10-best-php-frameworks-for-web-development-in-2021/">
          Read more
        </a>
     </div>
   </div>
  </div>
</div>

skeleton

Let’s get a better understanding of skeleton styling as well as loading CSS

I’ve included animation as well as color in the texts and buttons. So the first step was to add color to buttons and text, then I added animations by using @keyframes.

Animation duration: 2s are used to make this animation run for 2 seconds. This animation is the shadow of a black object that will continue from left-right after every two seconds.

The most important step is to disable the animation by using JavaScript. In the above example, we included Skeleton Screen Loading Animation using CSS.

.blog-card .blogimage {
  height: 230px;
  width: 100%;
  position: relative;
  background-image: url(https://www.phplift.net/wp-content/uploads/2021/09/10-Best-PHP-Frameworks-For-Web-Development-In-2021-370x223.png);
  background-position: center;
  background-size: cover;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}


/* now adding skeleton styling */

.blog-card.skeleton .blogimage {
  background: #e2e2e2;
}
.blog-card.skeleton .hide-text {
  background: #e2e2e2;
  color: transparent;
  position: relative;
  overflow: hidden;
}
.blog-card.skeleton .hide-text::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0;
  height: 100%;
  width: 50px;
  background: linear-gradient(to right, #e2e2e2 25%, #d5d5d5 50%, #e2e2e2 100%);
  animation-name: gradient-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  filter: blur(5px);
}

@keyframes gradient-animation {
  from {
    left: 0%;
  }
  to {
    left: 100%;
  }
}

skeleton 2

This animation will go on for a long time. After some time using JavaScript, you need to switch off the animation and tell it to look up all the data within the card. I set the duration to 3000 milliseconds with setTimeout. It means that after 3000 milliseconds, the gray animations will disappear.

<script>
  const $el = document.querySelector(".blog-card");
  // Loading finished
  setTimeout(() => {
    $el.classList.remove("skeleton");
    $el.querySelectorAll(".hide-text").forEach((el) => el.classList.remove("hide-text"));
  }, 3000);
</script>

If you wish to use the 4 second period instead of 3 seconds, you need to choose to use an alternative number of 4000 in this case.

I hope you have learned from this tutorial how to create Skeleton Loading animation using HTML CSS, and JavaScript. Please feel free to comment below if you are facing any issue.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

  • Tags
  • Skeleton Animation
  • Skeleton Screen Loading
Facebook Twitter Google+ LinkedIn Pinterest
Next article 7 JavaScript array methods you must know as a programmer
Previous article Top 7 Platforms to Master Coding in 2022

Huzoor Bux

I am a PHP Developer

Related Posts

How to Convert HTML to PDF in PHP with fpdf HTML
February 28th, 2022

How to Convert HTML to PDF in PHP with fpdf

Convert HTML to PDF in Javascript using jsPDF with Example Download HTML
August 3rd, 2021

Convert HTML to PDF in Javascript using jsPDF with Example Download

Create pure CSS based toggle visibility button CSS
November 16th, 2020

Create pure CSS based toggle visibility button

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Advertisement
    Like us
    Recent Posts
    • How to Extract Text from PDF using PHP
    • 3 reasons why you SHOULD write tests
    • How to create a screen recorder in JavaScript
    • Best 10 Programming Languages that will rule in 2022
    • Top 7 Websites To Get Your First Paid Internship
    Categories
    • API
    • Bootstrap
    • Bot
    • CSS
    • CSS 3
    • Database
    • Designing
    • Framework
    • Guide
    • HTML
    • HTML 5
    • JavaScript
    • jQuery
    • MySQL
    • Node.js
    • oAuth
    • Payment
    • PHP
    • Python
    • Social
    • Tips
    • WordPress
    Weekly Tags
    • PHP
    • How to
    • javascript
    • api
    • MYSQL
    • jQuery
    • PHP Basics
    • Programming Habits
    • HTML5
    • PHP framework
    • About
    • Privacy Policy
    • Back to top
    © PHPLift 2021. All rights reserved.
     

    Loading Comments...