Change gif image for loading panel

[David]

Trying to change "busy" animation for WebBlue.

Please help

[Attila Antal]

Hi David,

You can use the Template functionality of the AjaxLoadingPanel and add any loading image of your choice.

Check out the AjaxLoadingPanel - Templates and Transparency article to see it in action.

Kind regards,
Attila Antal
Progress Telerik

[David]

Hi Atilla,

  Can it be solved on css level?

[Attila Antal]

Hi David,

 

Yes, almost everything related to appearance can be handled with CSS. In some cases, however, JavaScript is required additionally to override some rules, especially if the controls that need the styling have their own internal JavaScript logic which executes at a later stage (after the CSS is loaded) and it applies some styling. Overriding these styles can only be done once the internal logic finished executing, for instance using JavaScript that executes at a later stage, right after the internal logic finished its execution.

Here are a couple of links that you might find helpful.

Events that you can try:

• Client-Side Events Overview - RadAjaxLoadingPanel 
• Sys.Application.add_load - ASP.NET approach for the Page Load client-side event.

 

A couple of CSS rules that you can check out:

• CSS Content
• background-image

 

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

 

For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

 

Kind regards,
Attila Antal
Progress Telerik