Use custom .gif on Load

[Joel]

How do I use my own .gif in the grid while it is loading?

[Georgi Denchev]

Hi, Joel

My colleague has given an answer to this question in this thread:

https://www.telerik.com/forums/kendo-grid-loader-icon-customization#Uhbt_JDeqUaW8qTibNSBDA

To save you some time you need to modify the styling class of the loader. The following snippet could be copy-pasted directly into the grid's View file.

<style>
    .k-loading-mask .k-loading-image {
      background-image: url('Url to your gif');
    }
  </style>

In the above link there is a runnable preview in Dojo in case you want to examine it yourself.

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

[Grzesiek]

@Georgi Denchev

I've tried code below:

<style>
    .k-loading-mask .k-loading-image 
     {
  	    background-image:url('./images/loader.gif');
     }
</style>

 

But it doesn't overwrite default image (repeat is not a problem, I can fix it).

 

Do you have any idea, why it happens?

[Aleksandar]

You can add the following style to achieve the desired result:

<style>
      .k-loading-image:before,
      .k-loading-image:after{
        display: none !important;
      }
      .k-loading-image{
        background: url('./images/loader.gif')
          center center no-repeat;
      }
    </style>

Here is a dojo.

[Grzesiek]

Thanks a lot, it works :)

[Joel]

This worked for me, also.  Thanks.