Show loading gif after cacl button pressed

  • Hi. We noticed the form changes colour and goes disabled (i think) or fades after a person clicks the caculate shipping button which is great but how can I add a loading gif because sometimes people click ot mutuple time because they think its not working when somwtimes it takes a long time to process.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author rajeshsingh520

    (@rajeshsingh520)

    Hi,

    Add the below CSS code in your site Appearance > Customizer > Additional CSS this will show a Processing…. and it will block the UI so user cant do multiple clicks

    
body.pisol-processing .pisol-ppscw-container{
    position:relative;
    opacity:1 !important;
}

body.pisol-processing .pisol-ppscw-container:after {
    content:"Processing.....";
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#F00;
    background:rgba(244,244,244,0.6)
}
    Thread Starter bathroo

    (@bathroo)

    Works but when page loads I can see the content:"Processing.....";

    Is there a ay to hide this on on page load?

    Plugin Author rajeshsingh520

    (@rajeshsingh520)

    please send your website link

    Thread Starter bathroo

    (@bathroo)

    https://bathroomhut.com.au/

    Plugin Author rajeshsingh520

    (@rajeshsingh520)

    It is only showing Processing….. message it will remain as even on the page load there is a ajax request cant remove that message

    Thread Starter bathroo

    (@bathroo)

    Then I’ll need to change your pisol-product-page-shipping-calculator-woocommerce-public.js again to get it working properly.

    Thread Starter bathroo

    (@bathroo)

    Ah, I see your .css sets it too

    body.pisol-processing .pisol-ppscw-container{
    opacity:0.4;
    }

    Thread Starter bathroo

    (@bathroo)

    before I dive into your code again, any ideas on how to resolve it?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Show loading gif after cacl button pressed’ is closed to new replies.