Customize the Loading Animation

Assuming you have a good general understanding of HTML and CSS, customizing the branding of your search interface is straightforward.

Customizing the Default Search Page Loading Animation

Coveo JavaScript Search Framework 2.2900.23 (July 2017)

Placeholders are now displayed by default when loading a search interface.

If you want, you can change the loading animation of a ResultList component to a spinner, or disable it entirely by setting its waitAnimation option to the desired value.

Therefore, this section only applies to search interfaces relying on JavaScript Search Framework versions prior to the July 2017 release.

By default, when you set the waitAnimation option of a ResultList to spinner, the following animation becomes visible while loading:

You can override the CSS rule which corresponds to the coveo-logo class to replace the default loading animation logo with your own.

  1. In a CSS file associated to your search page, add the following rule:

     .coveo-logo {
       background-image: url("path/to/my/logo.png");
       background-position: 0 0; /* You need to reset this because the animation uses a sprite to display the default logo. */
       background-size: auto; /* There are several options for background-size depending on the file you use (see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size). */
     }
    
  2. Replace the url for background-image to the image you want to show while the search page is loading.
  3. If you want to change the dot animation, add a rule such as this one:

     .coveo-first-loading-animation .coveo-loading-container .coveo-loading-dot {
       /*
          You can add rules about the styling of the loading dots here.
          For example, you can color the dots red.
       */
       background-color: red;
     }
    

Overriding the default logo of the Quickview modal box loading animation requires greater specificity:

.coveo-modal-container .coveo-quick-view .coveo-modal-body .coveo-logo {
  height: 20%;
  width: 20%;
}

Customizing the Quickview Loading Animation

There are two ways in which you can change the Quickview loading animation: overriding the existing animation, or creating your own.

Overriding the animation should only be used if you want to adjust certain things about the existing animation, such as the logo displayed or the size of the logo. When you want a custom loading animation, you’re encouraged to create your own.

Overriding the Existing Animation

This procedure is similar to the one when customizing the default loading animation.

The rule to apply should look like this:

.coveo-modal-container .coveo-quick-view .coveo-modal-body .coveo-logo {
  /*
     You can add CSS rules to change the quickview loading animation.
     For example, you can change the size of the animation.
  */
  height: 20%;
  width: 20%;
}

Coveo JavaScript Search Framework 2.2900.23 (July 2017)

Since the July 2017 Release (v2.2900.23), the Coveo JavaScript Search Framework uses SVG icons rather than sprites (see Customize SVG Icons.

Consequently, if you want to modify the default loading logo in v2.x, you must first set the display property of its SVG element to none. Otherwise, your logo will be superposed to the default one.

Additionally, you no longer need to reset the background-position and background-size properties in v2.x.

.coveo-logo svg {
  display : none;
}
 
.coveo-logo {
  background-image: url("path/to/my/logo.png");
}

Creating a Custom Loading Animation

The loadingAnimation option of the Quickview component allows you specify the HTML element you want to use for modal window loading animation.

You can target the HTML element directly by specifying its CSS selector in the markup of your search page, as such:

[ ... ]
<div class="CoveoResultList">
  <script id="my-result-template" class="result-template" type="text/underscore">
    <% var loadingAnimationElement = document.createElement("div"); %>
    <% loadingAnimationElement.className = "my-loading-animation"; %>
    <% loadingAnimationElement.innerHTML = `Loading...`; %>
    <% Coveo.$$(document)find("#search").appendChild(loadingAnimationElement); %>
    <div class="CoveoQuickview" data-loading-animation-selector=".my-loading-animation"></div>
  </script>
</div>
[ ... ]

You can also target a previously registered template by specifying its id (see TemplateCache):

[ ... ]
<script id="my-loading-animation-template" class="result-template" type="text/html">
  <div class="my-loading-animation">Loading...</div>
</script>
<div class="CoveoResultList">
  <script id="my-result-template" class="result-template" type="text/html">
    <div class="CoveoQuickview" data-loading-animation-template-id="my-loading-animation-template"></div>
  </script>
</div>
[ ... ]
Recommended Articles