{"id":793,"date":"2024-08-13T15:21:23","date_gmt":"2024-08-13T15:21:23","guid":{"rendered":"https:\/\/sitegator.in\/?p=793"},"modified":"2025-03-22T07:36:10","modified_gmt":"2025-03-22T07:36:10","slug":"card-skeleton-only-html-and-css","status":"publish","type":"post","link":"https:\/\/sitegator.in\/cms\/card-skeleton-only-html-and-css\/","title":{"rendered":"Card skeleton (only html and css)"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" src=\"https:\/\/sitegator.in\/wp-content\/uploads\/2024\/08\/image-1024x389.png\" alt=\"\" class=\"wp-image-794\" srcset=\"https:\/\/sitegator.in\/cms\/wp-content\/uploads\/2024\/08\/image-1024x389.png 1024w, https:\/\/sitegator.in\/cms\/wp-content\/uploads\/2024\/08\/image-300x114.png 300w, https:\/\/sitegator.in\/cms\/wp-content\/uploads\/2024\/08\/image-768x292.png 768w, https:\/\/sitegator.in\/cms\/wp-content\/uploads\/2024\/08\/image-1536x584.png 1536w, https:\/\/sitegator.in\/cms\/wp-content\/uploads\/2024\/08\/image.png 1825w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\">\r\n  &lt;div class=\"col-sm-6 col-md-3\">\r\n    &lt;div class=\"main-card\">\r\n      &lt;div style=\"height:190px; background:black\">&lt;spna style=\"color:white\">Your Image&lt;\/span>\r\n      &lt;\/div>\r\n      &lt;div class=\"loading-content\">\r\n        &lt;div class=\"loading-text-container\">\r\n          &lt;div >Main Title&lt;\/div>\r\n          &lt;div>Sub Title&lt;\/div>\r\n        &lt;\/div>\r\n        &lt;div>&lt;button>Submit&lt;\/button>&lt;\/div>\r\n      &lt;\/div>\r\n    &lt;\/div>\r\n  &lt;\/div>\r\n  &lt;div class=\"col-sm-6 col-md-3\">\r\n    &lt;div class=\"main-card\">\r\n      &lt;div class=\"loading-image\">&lt;\/div>\r\n      &lt;div class=\"loading-content\">\r\n        &lt;div class=\"loading-text-container\">\r\n          &lt;div class=\"loading-main-text\">&lt;\/div>\r\n          &lt;div class=\"loading-sub-text\">&lt;\/div>\r\n        &lt;\/div>\r\n        &lt;div class=\"loading-btn\">&lt;\/div>\r\n      &lt;\/div>\r\n    &lt;\/div>\r\n  &lt;\/div>\r\n&lt;\/div>\r\n\r\n&lt;style>\r\n  body {\r\n  padding: 50px;\r\n  background: #e3e3e3;\r\n}\r\n\r\n.main-card {\r\n  height: 252px;\r\n  border-radius: 4px;\r\n  overflow: hidden;\r\n  margin-bottom: 15px;\r\n}\r\n\r\n.main-card .loading-image {\r\n  height: 190px;\r\n  background-image: -webkit-linear-gradient(left, #ececec 0px, #f4f4f4 40px, #ececec 80px);\r\n  background-image: -o-linear-gradient(left, #ececec 0px, #f4f4f4 40px, #ececec 80px);\r\n  background-image: linear-gradient(90deg, #ececec 0px, #f4f4f4 40px, #ececec 80px);\r\n  background-size: 250px;\r\n  -webkit-animation: shine-loading-image 2s infinite ease-out;\r\n          animation: shine-loading-image 2s infinite ease-out;\r\n}\r\n\r\n.main-card .loading-content {\r\n  background: #f7f7f7;\r\n  padding: 15px;\r\n  display: -webkit-box;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -webkit-box-align: center;\r\n      -ms-flex-align: center;\r\n          align-items: center;\r\n  -webkit-box-pack: center;\r\n      -ms-flex-pack: center;\r\n          justify-content: center;\r\n}\r\n\r\n.main-card .loading-content .loading-text-container {\r\n  -ms-flex-preferred-size: 100%;\r\n      flex-basis: 100%;\r\n}\r\n\r\n.main-card .loading-content .loading-main-text {\r\n  height: 10px;\r\n  width: 65%;\r\n  margin-bottom: 10px;\r\n  background: #ececec;\r\n  background-image: -webkit-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);\r\n  background-image: -o-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);\r\n  background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);\r\n  background-size: 250px;\r\n  border-radius: 10px;\r\n  -webkit-animation: shine-loading-container-items 2s infinite ease-out;\r\n          animation: shine-loading-container-items 2s infinite ease-out;\r\n}\r\n\r\n.main-card .loading-content .loading-sub-text {\r\n  height: 10px;\r\n  width: 50%;\r\n  background: #ececec;\r\n  background-image: -webkit-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);\r\n  background-image: -o-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);\r\n  background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);\r\n  background-size: 250px;\r\n  border-radius: 10px;\r\n  -webkit-animation: shine-loading-container-items 2s infinite ease-out;\r\n          animation: shine-loading-container-items 2s infinite ease-out;\r\n}\r\n\r\n.main-card .loading-content .loading-btn {\r\n  width: 60px;\r\n  height: 25px;\r\n  background: #ececec;\r\n  background-image: -webkit-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);\r\n  background-image: -o-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);\r\n  background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);\r\n  background-size: 250px;\r\n  border-radius: 3px;\r\n  -webkit-animation: shine-loading-container-items 2s infinite ease-out;\r\n          animation: shine-loading-container-items 2s infinite ease-out;\r\n}\r\n\r\n\r\n@-webkit-keyframes shine-loading-image {\r\n  0% {\r\n    background-position: -32px;\r\n  }\r\n  40%, 100% {\r\n    background-position: 208px;\r\n  }\r\n}\r\n\r\n\r\n@keyframes shine-loading-image {\r\n  0% {\r\n    background-position: -32px;\r\n  }\r\n  40%, 100% {\r\n    background-position: 208px;\r\n  }\r\n}\r\n\r\n@-webkit-keyframes shine-loading-container-items {\r\n  0% {\r\n    background-position: -100px;\r\n  }\r\n  40%, 100% {\r\n    background-position: 140px;\r\n  }\r\n}\r\n\r\n@keyframes shine-loading-container-items {\r\n  0% {\r\n    background-position: -100px;\r\n  }\r\n  40%, 100% {\r\n    background-position: 140px;\r\n  }\r\n}\r\n&lt;\/style><\/code><\/pre>\n\n\n\n<p>Find source code on github<\/p>\n\n\n\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/github.com\/pratik-maurya\/skeleton\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Find source code on github<\/p>\n","protected":false},"author":1,"featured_media":794,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,45],"tags":[],"class_list":["post-793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html"],"_links":{"self":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/comments?post=793"}],"version-history":[{"count":2,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/793\/revisions"}],"predecessor-version":[{"id":796,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/793\/revisions\/796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/media\/794"}],"wp:attachment":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/media?parent=793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/categories?post=793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/tags?post=793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}