By lauriii on
Change record status: 
Published (View all published change records)
Project: 
Drupal core
Introduced in branch: 
8.6.x
Introduced in version: 
8.6.0
Issue links: 
https://www.drupal.org/node/2407859
Description: 

Previously it was only possible to override the CSS to change the design of throbbers. Now it is also possible to override the markup which will make it easier to customize the throbber design.

For example if you want to replace the throbber by a simple text you could do following:

Drupal.theme.ajaxProgressThrobber = () => '<div>Loading...</div>';
Drupal.theme.ajaxProgressIndicatorFullscreen = () => '<div>Loading...</div>';

You can also customize only throbber message:
Drupal.theme.ajaxProgressMessage = message => '<div class="my-message">' + message + '</div>';

Impacts: 
Themers

Comments

dennis cohn’s picture

dennis cohn commented

Great! Got my own fancy throbber override now! Thanks.
For those people who want to know how:

In my theme_name.info.yml file I had to add to following lines:

libraries-extend:
  core/drupal.ajax:
    - theme_name/throbber

Then, in my theme_name.libraries.yml I had to add my library with the above examples and desired changed to the html.

throbber:
  js:
    dist/js/throbber.js: {}
  dependencies:
    - core/jquery
    - core/drupal

I name the library 'throbber'. You can name it anything you want.

thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
commented

Aouuwww, thats great!

Javascript example:

/**
 * @file
 * Replaced Drupal cores ajax throbber(s), see: https://www.drupal.org/node/2974681
 *
 */
(function ($, Drupal) {
  Drupal.theme.ajaxProgressThrobber = () => `
    <div class="ajax-spinner ajax-spinner--inline">
      <span class="ajax-spinner__label">`
        + Drupal.t('Loading&nbsp;&hellip;', {}, {context: "Loading text for Drupal cores Ajax throbber (inline)"}) + `
      </span>
    </div>`;
  Drupal.theme.ajaxProgressIndicatorFullscreen = () => `
    <div class="ajax-spinner ajax-spinner--fullscreen">
      <span class="ajax-spinner__label">`
        + Drupal.t('Loading&nbsp;&hellip;', {}, {context: "Loading text for Drupal cores Ajax throbber (fullscreen)"}) + `
      </span>
    </div>`;
    // You can also customize only throbber message:
    // Drupal.theme.ajaxProgressMessage = message => '<div class="my-message">' + message + '</div>';
})(jQuery, Drupal);
anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

Please mind that this should perhaps be es2015 compatible using the es2015 syntax, your example:

Drupal.theme.ajaxProgressThrobber = function () {
  return "<div class=\"ajax-spinner ajax-spinner--inline\"><span class=\"ajax-spinner__label\">" + Drupal.t('Loading&nbsp;&hellip;', {}, {
    context: "Loading text for Drupal cores Ajax throbber (inline)"
  }) + "</span></div>";
};

Drupal.theme.ajaxProgressIndicatorFullscreen = function () {
  return "<div class=\"ajax-spinner ajax-spinner--fullscreen\"><span class=\"ajax-spinner__label\">" + Drupal.t('Loading&nbsp;&hellip;', {}, {
    context: "Loading text for Drupal cores Ajax throbber (fullscreen)"
  }) + "</span></div>";
};

http://www.DROWL.de || Professionelle Drupal Lösungen aus Ostwestfalen-Lippe (OWL)
http://www.webks.de || webks: websolutions kept simple - Webbasierte Lösungen die einfach überzeugen!
http://www.drupal-theming.com || Individuelle Responsive Themes

bardiuk’s picture

bardiuk commented

I created a new theme based on Classy, here are my dependencies.

  dependencies:
    - core/jquery
    - core/drupal
    - core/ajax
    - core/drupalSettings
    - core/jquery.once

The throbber (progress) just doesn't appear. Why?

mabho’s picture

mabho commented

The first thing I can recommend you do is test if the custom library is being loaded by checking the source code. Also, check if your custom Javascript file isn't throwing any console errors.