Trying to replace default Kendo loading Indicator post SASS style change, but can't

[Mike]

Hi there,

I'm in the middle of migrating my site to the new SASS css for the new Progress release (Telerik.UI.for.AspNew.Mvc5.2023.2.829), and I'm trying to override the default animated spinning black circle icon with one of the old loading image gifs from one of your classic css styles which matches the site better.

For example, if you override the css with:

.k-loading-image {
    background-position: center;
    background-image: url(images/kendo/loading-image.gif) !important;
    background-repeat: no-repeat;
}

You end up with the new loading image displaying on-top-of / alongside the SASS default loading animation (see attached image), instead of replacing it.

This seems to be the case with old Dojo examples provided by yourselves in the Forum:

https://www.telerik.com/forums/progress-loading---k-loading-image-doesn-t-work-correctly

Can you please provide a way of overriding the loading indicator based on the new SASS style sheets?

Many thanks,

Mike

[Martin]

Hello, Mike,

Here is a small example how you can override the loading icon. 

Let me know how that works for you.

Regards,
Martin
Progress Telerik

[Mike]

Works a treat Martin - thanks for your help :)