Shimmer Effect
//implementing shimmer effect
//define styles for your shimmer like color,animation etc in style
<style>
.shimmer-line {
height: 10px;
margin-top: 20px;
background: #777;
}
.shimmer {
border: 1px solid #00000045;
padding-top: 5px;
padding-left: 25px;
padding-bottom: 6px;
border-radius: 15px;
margin-left: 5px;
}
.main_slider_shimmer{
border: 0px solid #00000045;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0;
border-radius: 13px;
margin-left: 5px;
width: 100%;
}
@keyframes shimmer-full-view {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
@keyframes shimmer-animation {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.shimmer-animate {
animation : shimmer-animation 2s infinite linear;
background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
background-size: 1000px 100%;
}
</style>
//then take divs as per required for screen content with class name shimmer
<main class="main">
<div class="shimmer col-xl-3 col-lg-4 col-md-5 col-12 col-sm-6 mt-2" style="width: 300px !important;">
<div class="shimmer-box shimmer-box-md shimmer-animate" style="width: 290px !important;"></div>
<div class="shimmer-line shimmer-line-br shimmer-line-full shimmer-animate" style="width: 290px !important;"></div>
<div class="shimmer-line shimmer-line-br shimmer-line-full shimmer-animate" style="width: 290px !important;"></div>
<div class="shimmer-line shimmer-line-br shimmer-line-full shimmer-animate" style="width: 290px !important;"></div>
<div class="shimmer-line shimmer-line-br shimmer-line-full shimmer-animate" style="width: 290px !important;"></div>
</div>
</main>
<script>
//in script file write condition when your shimmer should be hide
new_releases('');
var shimmerContainers = document.querySelectorAll('.shimmer-container');
shimmerContainers.forEach(function(container) {
var images = container.querySelectorAll('img');
var shimmer = container.querySelector('.shimmer');
// Hide shimmer when all images are loaded
images.forEach(function(image) {
image.addEventListener('load', function() {
shimmer.style.display = 'none';
});
});
});
function new_releases(selectedValue) {
var sending_data = {
sort_condition: selectedValue
}
AjaxCall(function(data, header, error) {
var response = JSON.parse(data);
console.log(response, "new releases");
var product12 = response['products'];
$("#news-weekly-product-slider").empty();
var rating_width_percentage = "0.0";
console.log(product12, '99999');
var product_card1 = "";
for (let index = 0; index < product12.length; index++) {
const element = product12[index];
// console.log(cart_quantity, '112121');
btn_to_add = 'show_btn(' + index + ')'
console.log(element, "Here");
var addingbtn = "";
const elementCopy = [];
for (let i = 0; i < product12.length; i++) {
elementCopy.push({
...product12[i]
});
}
product_card1 += '<div id="shim_id' + elementCopy[index]["item_id"] + '" class="shimmer col-xl-3 col-lg-4 col-md-4 col-12 col-sm-6 mt-2"><div class="shimmer-box shimmer-box-md shimmer-animate"></div> <div class="shimmer-line shimmer-line-br shimmer-line-fullfull shimmer-animate"></div> <div class="shimmer-line shimmer-line-br shimmer-line-full shimmer-animate"></div> <div class="shimmer-line shimmer-line-br shimmer-line-full shimmer-animate"></div> <div class="shimmer-line shimmer-line-br shimmer-line-full shimmer-animate"></div></div><div id="products_class_' + elementCopy[index]["item_id"] + '" class=" col-xl-3 col-lg-4 col-md-4 col-12 col-sm-6 mt-2 d-none" data-product-id="' + elementCopy[index]["item_id"] + '">' +
'<div ><input type="hidden" name="prod_id' + index + '" id="prod_id' + index +
'" value=' + elementCopy[index]["item_id"] + '>' +
'<input type="hidden" id="max_units_per_order' + elementCopy[index]["item_id"] + '" value="' +
elementCopy[index]['minimum_order_quantity'] + '">' +
'<div class="product-cart-wrap mb-30 ml-10 row"><div class="product-img-action-wrap col-lg-12 col-md-12 col-sm-12 col-5">' +
'<div class="product-img product-img-zoom" id="image-padding"><a href="/product_details/' +
elementCopy[index]["item_id"] + '">' +
'<img class="default-img" src="' + element["image"] + '" onload="image_loaded(' + elementCopy[index]["item_id"] + ')" alt=""></a></div></div>' +
'<div class="product-content-wrap col-lg-12 col-md-12 col-sm-12 col-7"><div style="display: flex; justify-content: space-between;height: 42px">' +
'<h2><a class="text_wrap" href="/product_details/' + elementCopy[index]["item_id"] + '">' +
elementCopy[index]["name"] + '</a></h2>' +
'<div><span style="float: right;">' +
'<a aria-label="Add To Wishlist" class="action-btn wishlist-button" onclick="wishlist(' +
elementCopy[index]["item_id"] + ')">' +
'<img class="img1" style="height:20px; display:' + img1Display +
';" src="https://nutsby.com/public/common_assets/web/imgs/heartlined.svg"></a>' +
'<a aria-label="Add To Wishlist" class="action-btn wishlist-button" onclick="wishlist(' +
elementCopy[index]["item_id"] + ')">' +
'<img class="img2" style="height:15px; display:' + img2Display + ';"' +
'src="https://webgrid.in/projects/nutsby_admin_panel/assets/web/imgs/Heart.svg"></a></span></div>' +
'</div><div class="empty_rating" id="empty_rating_' + elementCopy[index]["item_id"] + '"></div>' +
'<div class="product_rating_display" id="product_rating_element_' + elementCopy[index]["item_id"] + '">' +
'<div class="product-rate-cover">' +
'<div class="product-rate d-inline-block">' +
'<div class="product-rating" style="width: ' + rating_width_percentage + '%"></div>' +
'</div><span class="font-small ml-5 text-muted"> (' + elementCopy[index]["average_rating_count"] + ')</span>' +
'</div></div><div class="product-card-bottom" style="margin-bottom:5px;">' +
'<div class="product-price" style="margin: auto 0px;display:flex;margin-bottom:10px;">' +
'<span id="price_font">' + elementCopy[index]["price"] + '</span>' +
'<span class="old-price"><div class="input-group" id="mrp" style="display:' + price + ';">' + elementCopy[index]["mrp"] + '</div></span>' +
'<span id="discount" style="margin: 0 0 0 7px;display:' + percentage + ';">' + elementCopy[index]["discount_percentage"] + '%</span></div></div>' +
'<div id="empty_rating2_' + elementCopy[index]["item_id"] + '"></div>' +
'<div class="d-none d-sm-none d-md-none d-lg-none rating_display" id="product_rating_element2_' + element["item_id"] + '">' +
'<div class="product-rate-cover ">' +
'<span id="average_fs" style="color:black !important">' + elementCopy[index]["average_rating"] + '  </span>' +
'<div class="product-rate d-inline-block">' +
'<div class="product-rating" style="width: ' + rating_width_percentage + '%"></div>' +
'</div><span id="count_fs" style="color:black !important" class=" ml-5 " > |' + elementCopy[index]["average_rating_count"] + '<span id="rating_fs"> ratings</span></span>' +
'</div></div>' +
'<div style="margin-bottom:10px; margin-top:10px;" id="addbtn_' + elementCopy[index]["item_id"] + '" >' + addingbtn +
'</div></div></div></div></div></div>';
}
$("#ProductsIdAdding").empty();
$("#ProductsIdAdding").append(product_card1);
}, "/new_releases", sending_data)
}
//initialise what should be appended after shimmer is invisible and if want uise onload method to initialise what to be happen until the image is loaded or content is loaded
function image_loaded(id) {
$("#shim_id" + id).removeClass('shimmer');
$("#shim_id" + id).addClass('d-none');
$("#products_class_" + id).removeClass("d-none");
} //use this function to load the shimmer until the image from the response is completly loaded
</script>
Tagged: