How to customise throbber (spinning wheel icon) between pages? | XM Community
Question

How to customise throbber (spinning wheel icon) between pages?

  • 13 December 2018
  • 3 replies
  • 176 views

Userlevel 2
Badge +5
I have a survey that is using web services in the survey flow to collect information to populate upcoming questions. The web service call can take several seconds to load and I was wondering if there's a way to customise the look and feel of the blue spinning icon or provide a message like 'Please wait while we gather your {piped_text}'? Thanks.

3 replies

Badge +6
@dsweeney , you can create a descriptive question and add a .gif image of spinning wheel icon with desired text. and with some delay (using JS or auto submit option of Qualtrics)
Userlevel 2
Badge +5
Thanks @YASH1T , That's not quite what I'm after. When I see the icon there are no questions on the page (see image below). I'll keep digging.
!
Userlevel 2
Badge +5
I haven't figured this out yet, but just sharing some progress. The throbber is in a div called '.pace' that has a '.pace-activity' div and the animation is controlled by CSS. In the browser I can add some text using the following:
```
<script type="text/javascript">

var pacers = $$('.pace');
if (pacers.length > 0)
{
var message = document.createTextNode('Please wait while we');
var br = document.createElement('br');
var div = document.createElement('div');
div.appendChild(message);
div.appendChild(br);
pacers[0].appendChild(div);
div.style = 'position: absolute;top: 40%;left: 0;right: 0;display: block;margin: auto;text-align: center;color: #fff;';
}

</script>
```
However, if I load this in the Header section of Look and Feel it doesn't work. So the header isn't instantiated here. So, if anyone knows how to get JS working in this context I'd be grateful.

Leave a Reply