Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save dbjpanda/55ce9739af4069bdf3405ca39a3e31ef to your computer and use it in GitHub Desktop.

Select an option

Save dbjpanda/55ce9739af4069bdf3405ca39a3e31ef to your computer and use it in GitHub Desktop.
Place a html widget on any page using elementor and then add the two classes .content-placeholder and .no-content to any row or column or section.
<script>
( function( $ ) {
$( window ).load(function() {
$('.no-content > div ').css("visibility","visible");
$('.content-placeholder').removeClass('content-placeholder');
});
} )( jQuery );
</script>
<style>
@-webkit-keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.content-placeholder {
display: inline-block;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: placeHolderShimmer;
animation-name: placeHolderShimmer;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background: #f6f7f8;
background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
-webkit-background-size: 800px 104px;
background-size: 800px 104px;
height: inherit;
position: relative;
}
.no-content > div{
visibility: hidden;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment