Quick Contact

When Should We Call You?

Edit Template

Card skeleton (only html and css)

<div class="container">
  <div class="col-sm-6 col-md-3">
    <div class="main-card">
      <div style="height:190px; background:black"><spna style="color:white">Your Image</span>
      </div>
      <div class="loading-content">
        <div class="loading-text-container">
          <div >Main Title</div>
          <div>Sub Title</div>
        </div>
        <div><button>Submit</button></div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="main-card">
      <div class="loading-image"></div>
      <div class="loading-content">
        <div class="loading-text-container">
          <div class="loading-main-text"></div>
          <div class="loading-sub-text"></div>
        </div>
        <div class="loading-btn"></div>
      </div>
    </div>
  </div>
</div>

<style>
  body {
  padding: 50px;
  background: #e3e3e3;
}

.main-card {
  height: 252px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
}

.main-card .loading-image {
  height: 190px;
  background-image: -webkit-linear-gradient(left, #ececec 0px, #f4f4f4 40px, #ececec 80px);
  background-image: -o-linear-gradient(left, #ececec 0px, #f4f4f4 40px, #ececec 80px);
  background-image: linear-gradient(90deg, #ececec 0px, #f4f4f4 40px, #ececec 80px);
  background-size: 250px;
  -webkit-animation: shine-loading-image 2s infinite ease-out;
          animation: shine-loading-image 2s infinite ease-out;
}

.main-card .loading-content {
  background: #f7f7f7;
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.main-card .loading-content .loading-text-container {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.main-card .loading-content .loading-main-text {
  height: 10px;
  width: 65%;
  margin-bottom: 10px;
  background: #ececec;
  background-image: -webkit-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
  background-image: -o-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
  background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
  background-size: 250px;
  border-radius: 10px;
  -webkit-animation: shine-loading-container-items 2s infinite ease-out;
          animation: shine-loading-container-items 2s infinite ease-out;
}

.main-card .loading-content .loading-sub-text {
  height: 10px;
  width: 50%;
  background: #ececec;
  background-image: -webkit-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
  background-image: -o-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
  background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
  background-size: 250px;
  border-radius: 10px;
  -webkit-animation: shine-loading-container-items 2s infinite ease-out;
          animation: shine-loading-container-items 2s infinite ease-out;
}

.main-card .loading-content .loading-btn {
  width: 60px;
  height: 25px;
  background: #ececec;
  background-image: -webkit-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
  background-image: -o-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
  background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
  background-size: 250px;
  border-radius: 3px;
  -webkit-animation: shine-loading-container-items 2s infinite ease-out;
          animation: shine-loading-container-items 2s infinite ease-out;
}


@-webkit-keyframes shine-loading-image {
  0% {
    background-position: -32px;
  }
  40%, 100% {
    background-position: 208px;
  }
}


@keyframes shine-loading-image {
  0% {
    background-position: -32px;
  }
  40%, 100% {
    background-position: 208px;
  }
}

@-webkit-keyframes shine-loading-container-items {
  0% {
    background-position: -100px;
  }
  40%, 100% {
    background-position: 140px;
  }
}

@keyframes shine-loading-container-items {
  0% {
    background-position: -100px;
  }
  40%, 100% {
    background-position: 140px;
  }
}
</style>

Find source code on github

https://github.com/pratik-maurya/skeleton

Leave a Reply

Your email address will not be published. Required fields are marked *

Popular Articles

Everything Just Becomes So Easy

Lorem Ipsum is simply dumy text of the printing typesetting industry lorem ipsum.

Most Recent Posts

  • All Post
  • angular
  • bakend
  • Banking
  • Business
  • cloud
  • Comertial
  • css
  • deployment
  • E-commerce Development
  • Entertinment
  • frontend
  • helth
  • helth and lifestyle
  • html
  • javascript
  • lifestyle
  • react
  • react js
  • seo
  • server
  • speed
  • ssr
  • Tech
  • website
    •   Back
    • Popular

Join the Journey

Get the latest updates, insights, and exclusive content delivered straight to your inbox. No spam—just value.

You have been successfully Subscribed! Ops! Something went wrong, please try again.

Sitegator is a full-service digital agency offering design, web development, social media management, and SEO. From concept to launch, we deliver complete digital solutions under one roof.

Address

Company

About Us

Agency

Services

Network

Team

Information

Products

Pricing

Disclaimer

Privacy Statement

Terms of Service

© 2025 Created by SITEGATOR