מדריך קצר לאיך משנים את אנימציית הטעינה של ליסטינג בוורדפרס אל Skeleton Loading Animation
שיפור חווית משתמש, עבודה של 2-3 דקות גג והכי חשוב - מבדל אתכם ממתחרים שלא משתמשים בזה. בהצלחה!
<div class="movie--isloading" style="display:none;">
<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>
.movie--isloading .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;
}
.movie--isloading .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;
}
.movie--isloading .loading-content .loading-text-container {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.movie--isloading .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;
}
.movie--isloading .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;
}
.movie--isloading .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;
}
}
/* DroriDigital - Digitup | skeleton animation loader - אנימציית טעינה */
function enqueue_skeleton_loader_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(document).on('ajaxStart', function() {
// מסתיר את האלמנט המקורי והצג במקומו את האנימציית שלד
jQuery('.original-element').hide();
jQuery('.movie--isloading').show();
});
$(document).on('ajaxComplete', function() {
// מסתיר את אנימציית שלד והצג במקומו את האלמנט המקורי
jQuery('.movie--isloading').hide();
jQuery('.original-element').show();
});
});
</script>
<?php
}
add_action('wp_footer', 'enqueue_skeleton_loader_script');
נראה/תה לאחרונה לפני 6 דק'
