JezK
Edit File: TemplateLoadingSkeleton.scss
.wcf-template-loading-skeleton.is-placeholder { background-color: #f7f7f7; .wcf-loading-nav-menu { display: flex; width: 100%; /* height: 50px; */ padding: 20px; justify-content: space-between; .wcf-loading-logo { width: 13%; /* height: 10%; */ background-color: #ddd; padding: 2%; } .wcf-loading-nav__items { display: flex; justify-content: space-between; width: 40%; align-items: center; span { background-color: #ddd; padding: 3% 10%; } } } .wcf-loading-container { padding: 1% 2%; } .wcf-loading-content { display: flex; width: 100%; padding: 2%; justify-content: space-between; flex-direction: column; .wcf-content-row { margin-bottom: 25px; width: 100%; display: flex; justify-content: space-between; padding: 2% 0; .wcf-left-content, .wcf-right-content { width: 48%; display: block; .wcf-row { width: 100%; background-color: #ddd; padding: 2%; display: block; margin: 0 0 15px 0; } .wcf-loading-heading-block { padding: 6%; background-color: #ddd; height: 20%; width: 100%; display: block; margin: 0 0 20px 0; } .wcf-loading-image-block { display: block; padding: 2%; background-color: #ddd; height: 300px; width: 100%; } .wcf-loading-button-block { padding: 2%; background-color: #ddd; height: 15%; width: 60%; display: block; margin: 0; } } .col-3 { margin-right: 30px; } } } .wcf-skeleton--wave { overflow: hidden; position: relative; &::after { top: 0; left: 0; right: 0; bottom: 0; content: ""; position: absolute; animation: wcf-skeleton-keyframes-wave 1.6s linear 0.5s infinite; transform: translateX( -100% ); background: linear-gradient( 90deg, transparent, rgba( 0, 0, 0, 0.12 ), transparent ); } } } @keyframes wcf-skeleton-keyframes-wave { 0% { transform: translateX( -100% ); } 60% { transform: translateX( 100% ); } 100% { transform: translateX( 100% ); } }