How do I target Ajax Loader Throbber in CSS?

Question

I recently installed Ajax Loader and it working great. However, I need some custom styling so, I can display the loading throbber in the center of the screen.

I can write my own CSS, But can't find the target class of Ajax Loader.

Looking forward for any help on this issue. Thanks in advance

Answer 1

To target the overlay you can use .ajax-progress and to target the throbber you can use .ajax-throbber.

Something like this would position the throbber on the center of the screen:

.ajax-progress {
  position: fixed;
  z-index: 99999999;
  background: rgba(255,255,255,0.6);
  text-align: center;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}

.ajax-throbber {
  left: 0;
  position:absolute;
  right:0;
  top: 50%;
  transform: translateY(-50%);
}