Skeleton Loading Effect | On Cards With Images, Text & Icons - Using HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you will learn how to design Card UI (Cards include images, text, and fontawesome icons) with a perfectly working skeleton loading effect using HTML, CSS, and Vanilla Javascript. Hope this video will be helpful.

Source Codes

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skeleton Loading Effect - Using HTML, CSS & Javascript</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  </head>
  <body>

<div class="container">
      <div class="card">
        <div class="card-image loading"><img src="1.jpg" alt=""></div>
        <div class="card-info">
          <h3 class="card-title loading"><span>Steven Reeves</span></h3>
          <p class="card-description loading"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
          <div class="card-mediaIcons">
            <a href="#" class="loading"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="loading"><i class="fab fa-twitter"></i></a>
            <a href="#" class="loading"><i class="fab fa-instagram"></i></a>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-image loading"><img src="2.jpg" alt=""></div>
        <div class="card-info">
          <h3 class="card-title loading"><span>Lorna Garcia</span></h3>
          <p class="card-description loading"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
          <div class="card-mediaIcons">
            <a href="#" class="loading"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="loading"><i class="fab fa-twitter"></i></a>
            <a href="#" class="loading"><i class="fab fa-instagram"></i></a>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-image loading"><img src="3.jpg" alt=""></div>
        <div class="card-info">
          <h3 class="card-title loading"><span>Victor Lowe</span></h3>
          <p class="card-description loading"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
          <div class="card-mediaIcons">
            <a href="#" class="loading"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="loading"><i class="fab fa-twitter"></i></a>
            <a href="#" class="loading"><i class="fab fa-instagram"></i></a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Javascript

//Show the hidden html elements
      cardImgs.forEach((cardImg) => {
        cardImg.style.visibility = "visible";
      });
      cardTitleSpans.forEach((cardTitleSpan) => {
        cardTitleSpan.style.visibility = "visible";
      });
      cardDescSpans.forEach((cardDescSpan) => {
        cardDescSpan.style.visibility = "visible";
      });
      mediaIcons.forEach((mediaIcon) => {
        mediaIcon.style.visibility = "visible";
      });
    }

//Execute renderCard on setTimeout
    setTimeout(() => {
      renderCard();
    }, 4000);

//Execute renderCard after the page loaded
    //window.addEventListener("load", () => {
      //renderCard();
    //});
    </script>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  min-height: 100vh;
}

.container{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.card{
  position: relative;
  background: #fff;
  max-width: 350px;
  width: 350px;
  margin: 20px;
  border-radius: 2px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 10%);
}

.card-image{
  max-height: 200px;
  overflow: hidden;
}

.card-image img{
  max-width: 100%;
  height: auto;
  visibility: hidden;
}

.card-title span{
  visibility: hidden;
}

.card-description span{
  visibility: hidden;
}

.card-mediaIcons a i{
  visibility: hidden;
}

.card-info{
  position: relative;
  color: #222;
  padding: 20px;
}

.card-info h3{
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 10px;
}

.card-info p{
  font-size: 1em;
  margin-bottom: 15px;
}

.card-info .card-mediaIcons{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-info .card-mediaIcons a{
  color: #999;
  font-size: 1.4em;
  margin: 0 10px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 50%;
  transition: color 0.3s ease;
}

.card-info .card-mediaIcons a:hover{
  color: #222;
}

.loading{
  position: relative;
  background: #e2e2e2;
  overflow: hidden;
}

.loading:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  animation: loading 1.5s infinite;
}

@keyframes loading{
  100%{
    transform: translateX(100%);
  }
}

Download Image Files

If the download didn't start automatically, click here.

Sunday, May 30, 2021

Skeleton Loading Effect | On Cards With Images, Text & Icons - Using HTML, CSS & Javascript

Description

Source Codes

HTML

Javascript

CSS

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Sunday, May 30, 2021

Skeleton Loading Effect | On Cards With Images, Text & Icons - Using HTML, CSS & Javascript

Description

Source Codes

HTML

Javascript

CSS

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form