What's the purpose of a "Pause Animation" button on a loading animation?

Question

Many of the loading spinners on Chase bank's rewards portal have a "Pause Animation" button below them. Is there a reason to include this below animations?

Answer 1

It's a WCAG accessibility requirement (2.2.2):

For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential

Animations distract from other content on the page, and this can cause issues in individuals with attention-related disabilities.

Answer 2

The one reason I can think of (which only applies to mobile devices) is that it can save processing power, and thus, battery power.

When I turn my phone onto Battery Saving mode all animations stop being processed. This in turn saves my battery juice for a little longer by not running those processes.

Since your example is on a desktop/laptop or otherwise, I would guess it might be due to incompatibility in some browsers... maybe it looks weird in IE?

Otherwise, as @LisaTweedie said, it's over-engineering.

Answer 3

Root problem is the loading indicator is way too overbearing (IMHO you could get dizzy if you stare at it too long)

So rather than fix the loading indicator and change it to something more elegant and fitting, a pause button was added.

Answer 4

While it's hard for us to know exactly why they implemented this, I agree with Izquierdo that this is probably for accessibility. (Though the implementation itself is not great imo)

Anyone who wants to take this accessibility option into account. CSS now has a prefers-reduced-motion media feature which you can use to check if the user wants to disable motion, like this animation. If true you could hide the animation and instead show some text, e.g.:

<img src="..." class="loading-animation">
<span class="loading-text">Data is loading...</span>

.loading-animation {
  display: block;
}
.loading-text {
  display: none;
}

@media (prefers-reduced-motion) {
  .loading-animation {
    display: none;
  }
  .loading-text {
    display: block;
  }
}