FEATURE REQUEST: The ability to change the loader animation

FEATURE REQUEST: The ability to change the loader animation

SickPuPSickPuP Posts: 13Questions: 6Answers: 0

In 2.x the loader animation is fixed to the 3 side-by-side dots pulsing. You can set the processing text to appear above the animation but you cannot actually change the animation. In 1.x the processing text controlled the entire loading display so the user could provide HTML or their own loader animation.

Proposal is to make language.processing -> language.loadingText
Add new property language.loadingAnimation which is a string that can override the animation but not the text.

For example, my company wants to use the a FontAwesome spinner icon.

Replies

  • rf1234rf1234 Posts: 2,975Questions: 87Answers: 421
    edited March 6

    For example, my company wants to use the a FontAwesome spinner icon.

    I am using that too. Not sure whether this works in the latest DT version, but it should.

    $.extend( true, $.fn.dataTable.defaults, {
        "language": {
            "processing": 
              "<span class='fa-stack fa-lg'>\n\
               <i class='fa fa-spinner fa-spin fa-stack-2x fa-fw'></i>\n\
               </span>&emsp;Processing ...",
    ...
    

    I am using DT 1.11.5.
    This: https://datatables.net/reference/option/language.processing
    says that CSS was added in DT 1.12. So you might need to "overwrite" that CSS ...

    Allan added a comment if you scroll down the linked page above. You might be able to hide the new animation. Not sure whether this will hide the entire thing or just the animation.

  • allanallan Posts: 63,441Questions: 1Answers: 10,459 Site admin

    Still perfectly possible with DataTables 2. Use this CSS to hide the default loading animation:

    div.dt-processing > div {
      display: none;
    }
    

    And then use language.processing to set the HTML needed for the FontAwesome icon.

    Here is a little example.

    Allan

  • SickPuPSickPuP Posts: 13Questions: 6Answers: 0

    I tried the styling but it kept being reset after the panel popped up. Maybe try it using Bootstrap 3 styling with Ajax data load and serverSide processing. I ended up using a small JS block to add the d-none class to the inner divs. I will dig a little more.

    A setting to turn this off or replace it would still be good in the future rather than having to use custom styling.

Sign In or Register to comment.