[Resolved] Does the Pagination Spinner still exist?

[Author]

Posts

[Evan Seplow]

In the past there have been 2 Spinners:

The "Filter Spinner", activated when a filtered search is made. - And the "Pagination Spinner", engaged when going to a new, non-cached page.

I'm NOT referring to the filter spinner here, since I have that working perfectly.

But I can't get the "Pagination Spinner" to show no matter what I do, and I've worked with this in the past. Reference this old post:
https://toolset.com/forums/topic/spinner-css-and-position/

So my questions are:

1 - Does views still support/provide a Pagination Spinner or has this been dropped?
2 - Is the CSS to get to it still: .wpv_slide_loading_img {}
3 - There are spinner options in the 'advanced' section of a view. Are these options for the Filter or Pagination Spinner? They have much fewer options than putting the code directly into a view for the filter spinner shortcode.

Basically, I can't see a spinner, so I assume it either isn't being generated or it's hidden offscreen. I've turning off all caching with no better result.

In particular the site in question is (a free account can be made to view the problem) on the home page. But cashing was re=eneabled for now). There's not much to see other than what I've already stated:
hidden link:

But this is reference to other sites as well.

[Shane]

Hi Scott,

Thank you for contacting our support forum.

1. Yes views still has support for the spinner graphics. See Screenshot
2. Yes the class is still wpv_slide_loading_img
3. These spinner graphics in this section are specifically for the pagination. However if you have AJAX filter enabled you can choose from the same set of graphics spinners for the filters. So even though the pagination and Search share the same spinners, you can choose a different one for each.

I looked at the link that you sent but wasn't able to see a view with pagination.

Thanks,
Shane

[Evan Seplow]

Ok, I figured this out - finally!!

Here's a whole bunch of information that I really think would be great if your Toolset team put into the documentation so that future people don't need to search around and find it here, but can find it where it's supposed to be:

THERE ARE 2 SPINNERS:
• The Filter Spinner is engaged when a user clicks on any filtered search (eg: Search for a taxonomy, etc).
• The Pagination Spinner is engaged when a user clicks to another page.

--- THE FILTER SPINNER ---
To place a FILTER SPINNER into your view, obviously you need to be using filters, but then in the "Search and Pagination" section of your view, you need to add a shortcode such as:

[wpv-filter-spinner position="after" spinner="Insert http location of your gif here unless you are using a default image" class="filterspinner"] Insert any text your wish here or leave blank[/wpv-filter-spinner]

More information about this shortcode found here:
https://toolset.com/documentation/user-guides/views-shortcodes/#vf-214918

You can POSITION this Filter Spinner using CSS, the controls are:

.filterspinner
.filterspinner > img

For example, the following will make the screen go dark and center the spinner (code gotten mostly from another post):

.filterspinner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(10,10,10,.5);
    z-index: 200;
}
.filterspinner > img {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50%;
  display:block;
}

The above makes sure the spinner is ABSOLUTE and above all other objects. So it doesn't bump everything down each time it's engaged. A simpler version I went with was to remove the background line and make my margin-top 80px (I wanted it a little down from the top)

--- THE PAGINATION SPINNER ---
To place a PAGINATION SPINNER into your view, obviously you need to be using pagination, but then in the "Pagination and Sliders Settings" section of your view, there is a section under ADVANCED to control the spinner. This section controls the pagination spinner only.

TRICK: The reason I wasn't seeing the spinner was that it was offscreen. The default is it centers vertically! So on a long page you can't see it (Kinda dumb). I also believe it's already absolutely positioned - So I added this code to bring it to the top, matching the distance the same as my Filter Spinner:

.wpv_slide_loading_img {top: 80px !important;}

Notice I has to add the !important. That was the trick I didn't see at first and once I added that in - it worked.

Adjust from there!