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.

  • 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