Forum Discussion

micha80's avatar
micha80
Expert
11 years ago

Styling ajax loading spinner

Hi,

 

I want to make custom style for the loading spinner. Currently I am styling the AskAnExpert component and when you enter a word the loading spinner appears and disapperas a few seconds after. I am not able to inspect the element. Can someone help me give me a suggestion on how I can style this element?

 

Thanks a lot!

Michael

  • nathan's avatar
    nathan
    11 years ago

    Are you using the Q&A Active Cast widget?

     

    In which case, the loading gif is displayed using a CSS rule on a span tag. This is the span tag:

    <span class="lia-lazy-load-small lia-button-wrapper"></span>

    And this is the CSS rule:

    #lia-body .lia-content .lia-lazy-load-small {
  background: url("/skins/images/015...34428F1E/base/images/feedback_loading_small.gif") no-repeat scroll 50% 50% transparent;
  height: 20px;
  width: 16px;
}

    To change the loading gif, you'll probably need to override this CSS rule.

2 Replies

Sort By
  • nathan's avatar
    nathan
    Executive
    11 years ago

    Are you using the Q&A Active Cast widget?

     

    In which case, the loading gif is displayed using a CSS rule on a span tag. This is the span tag:

    <span class="lia-lazy-load-small lia-button-wrapper"></span>

    And this is the CSS rule:

    #lia-body .lia-content .lia-lazy-load-small {
  background: url("/skins/images/015...34428F1E/base/images/feedback_loading_small.gif") no-repeat scroll 50% 50% transparent;
  height: 20px;
  width: 16px;
}

    To change the loading gif, you'll probably need to override this CSS rule.

  • micha80's avatar
    micha80
    Expert
    11 years ago

    Hi Nathian,

     

    thanks for the answer. I am not using the active cast component but the CSS class ".lia-lazy-load-small" was the one I was looking for. 

     

     

    Thanks a lot,

    Michael