While the search plugin is executing on the learn2 theme, there isn't any indication that the search is working or complete. What is the best approach to modify the learn2 theme to add an rotating icon: http://fontawesome.io/examples/#animated to indicate that the search is complete or in process.
Theme in question: https://learn.getgrav.org
Thanks in advance!
I was able to figure this out. For those willing to accomplish the same thing, you can add the following javascript to your learn.js in your theme folder:
// Listen for AJAX events and modify the SEARCH icon to a rotating spinner.
jQuery(document).ajaxStart(function (event, request, settings) {
jQuery(".searchbox label").replaceWith('<label for="search-by"><i class="fa fa-circle-o-notch fa-spin"></i><span class="sr-only">Loading...</span></label>');
});
jQuery(document).ajaxComplete(function (event, request, settings) {
jQuery(".searchbox label").replaceWith('<label for="search-by"><i class="fa fa-search"></i></label>');
});
---
Log in to reply.
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 0 | 1359 | 9 years ago | ||
| 2 | 936 | 9 years ago | ||
| 2 | 4066 | 9 years ago | ||
| 1 | 2957 | 9 years ago | ||
| 3 | 1121 | 9 years ago |