{"id":31704,"date":"2026-05-13T12:51:02","date_gmt":"2026-05-13T12:51:02","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=tips-and-tricks&#038;p=31704"},"modified":"2026-05-13T12:51:03","modified_gmt":"2026-05-13T12:51:03","slug":"adding-custom-loader-to-listing-grid-when-filtering-on-ajax","status":"publish","type":"tips-and-tricks","link":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/","title":{"rendered":"Adding Custom Loader to the Listing Grid When Filtering on AJAX"},"content":{"rendered":"\n<p>As you already have a <strong>Listing Grid <\/strong>block\/widget and a <em>JetSmartFilters <\/em>filter (or several of them) with AJAX <strong>Apply Type<\/strong> on the page, you could notice that by default, <strong>Listing Grid<\/strong> becomes translucent during loading.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/loader_icon_1.jpg\" alt=\"loader icon on the front end\">\n\n\n\n<p>In this tutorial, you will discover how to change the default view into the custom loader icon. For instance, we will present to you the following icon (see the picture below), but you are free to change it to your liking.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/loader_icon_2.jpg\" alt=\"loader icon built\">\n\n\n\n<p>Mind that to reproduce the depicted result on your WordPress website, you\u2019ll need to use CSS and JS codes.<\/p>\n\n\n\n<p>To implement the needed functionality, we will use the free Simple Custom CSS and JS plugin, but you can repeat the described steps with another desired plugin.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Add a Custom AJAX Loader to JetSmartFilters Listing Grid\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/42kpJ58Yr5Y?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"place-icon-on-page-and-make-it-animated\">Place Icon on Page and Make It Animated<\/h2>\n\n\n\n<p>Initially, create a section above the <strong>Listing Grid <\/strong>widget. Find and place the default Elementor <strong>Icon <\/strong>and <strong>Heading <\/strong>widgets there.<\/p>\n\n\n\n<p>Customize the content to your liking. You can see the example in the picture below.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/loader_icon_3.jpg\" alt=\"final custom loader result in elementor page builder\">\n\n\n\n<p>In the <strong>Advanced <\/strong>settings tab, paste the unique <strong>CSS ID <\/strong>code to the corresponding field of the <strong>Listing Grid <\/strong>widget.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/loader_icon_4.jpg\" alt=\"listing grid css id field\">\n\n\n\n<p>Find the filter you have used on the page, and paste the same ID in the <strong>Query ID <\/strong>field.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/loader_icon_5.jpg\" alt=\"filter query id field\">\n\n\n\n<p>Then, complete the <strong>CSS ID <\/strong>field of the column where <strong>Icon <\/strong>and <strong>Heading <\/strong>are placed with a new unique ID.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/loader_icon_6-1.png\" alt=\"column css id field\">\n\n\n\n<p>After you\u2019ve set the loader template, proceed to the following steps to make it movable.&nbsp;<br>To create an animation, open the <strong><em>WordPress Dashboard &gt; Custom CSS &amp; JS &gt; Add Custom CSS <\/em><\/strong>directory and paste the following CSS code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#loading_icon i {\n    -webkit-animation: fa-spin 2s infinite linear;\n    animation: fa-spin 2s infinite linear;\n<\/code><\/pre>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/loader_icon_7.jpg\" alt=\"custom css and js field\">\n\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">Instead of \u201cloading_icon,\u201d type the <strong>CSS ID<\/strong> you have set before for the column with <strong>Icon<strong> and <\/strong>Heading<\/strong>.<\/p><\/div><\/div>\n\n\n\n<p>You can check the page; the icon will be loading. Let\u2019s make the template hidden once the page is just loaded.<br>Add one more code the same way you did in the previous step:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#loading_icon {\n    display:none;\n}\n#loading_icon i {\n    -webkit-animation: fa-spin 2s infinite linear;\n    animation: fa-spin 2s infinite linear;\n}<\/code><\/pre>\n\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">Paste the <strong>CSS ID<\/strong> of the column instead of the \u201cloading_icon.\u201d<\/p><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"set-condition-for-icon-appearance\">Set Condition for Icon Appearance<\/h2>\n\n\n\n<p>For the proper work of the function and animation, add the following JS code:<\/p>\n\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">Since we have already used the first part of the code, copy and paste only the second, .php part. Also, mind changing the following pieces of the code. In the following part of code, put the slug of the page where the <strong>Listing Grid<\/strong> widget\/block is located instead of the \u201cjetsmartfilter-jetlisting-custom-spinner\u201d value. Secondly, paste the <strong>CSS ID<\/strong> of your column instead of the proceeding \u201citchy-loader\u201d value. And, finally, put the <strong>CSS ID<\/strong> of your Listing Grid instead of the \u201cmy-product-listing\u201d value.<\/p><\/div><\/div>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/custom-loader-php-code-parts-to-change-full.png\" alt=\"custom loader php code parts to change\">\n\n\n\n<script src=\"https:\/\/gist.github.com\/Crocoblock\/5f445042e57c96c6f040d1dfd46b3801.js\"><\/script>\n\n\n\n<p>You can check the result on the live page. That\u2019s it; now you know how to create the custom loader animation of the <strong>Listing Grid <\/strong>widget\/block after filtering it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Make the Listing Grid even more attractive by setting the custom loading icon to display once the filter is applied to the grid. Follow the steps described in the tutorial to recreate the user-friendly feature.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","tipstricks-tags":[359,360],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding Custom Loader to Listing Grid When Filtering on AJAX \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Find out how to add a custom loading icon to your WordPress page. Level up the appearance of your JetEngine Listing Grid after the JetSmartFilters filter is applied.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Custom Loader to Listing Grid When Filtering on AJAX \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Find out how to add a custom loading icon to your WordPress page. Level up the appearance of your JetEngine Listing Grid after the JetSmartFilters filter is applied.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-13T12:51:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/loader_icon_1.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/\",\"name\":\"Adding Custom Loader to Listing Grid When Filtering on AJAX \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2026-05-13T12:51:02+00:00\",\"dateModified\":\"2026-05-13T12:51:03+00:00\",\"description\":\"Find out how to add a custom loading icon to your WordPress page. Level up the appearance of your JetEngine Listing Grid after the JetSmartFilters filter is applied.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips & tricks\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Adding Custom Loader to the Listing Grid When Filtering on AJAX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Custom Loader to Listing Grid When Filtering on AJAX \u2014 JetEngine | Crocoblock","description":"Find out how to add a custom loading icon to your WordPress page. Level up the appearance of your JetEngine Listing Grid after the JetSmartFilters filter is applied.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/","og_locale":"en_US","og_type":"article","og_title":"Adding Custom Loader to Listing Grid When Filtering on AJAX \u2014 JetEngine | Crocoblock","og_description":"Find out how to add a custom loading icon to your WordPress page. Level up the appearance of your JetEngine Listing Grid after the JetSmartFilters filter is applied.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/","og_site_name":"Help Center","article_modified_time":"2026-05-13T12:51:03+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/loader_icon_1.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/","url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/","name":"Adding Custom Loader to Listing Grid When Filtering on AJAX \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2026-05-13T12:51:02+00:00","dateModified":"2026-05-13T12:51:03+00:00","description":"Find out how to add a custom loading icon to your WordPress page. Level up the appearance of your JetEngine Listing Grid after the JetSmartFilters filter is applied.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/adding-custom-loader-to-listing-grid-when-filtering-on-ajax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Tips & tricks","item":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/"},{"@type":"ListItem","position":3,"name":"Adding Custom Loader to the Listing Grid When Filtering on AJAX"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tips-and-tricks\/31704"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tips-and-tricks"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/tips-and-tricks"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=31704"}],"wp:term":[{"taxonomy":"tipstricks-tags","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tipstricks-tags?post=31704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}