Contact form 7 loader not displaying

[aiad_development]

Hello,
I cannot see the loader on a cient’s website and none of the other support threads seem to have the same code.

Order Online - Tranquil Water

Everyone else wrote about a class ajax-loader but the wrapper on this website it:

I’ve tried adding a pluign that makes it a custom spinner but no help.

I’ve spoken to another developer and she advised that on submit normally injects a class to make the spinner visibile but it isn’t doing that on this website.

PLEASE HELP!

[ruenel]

Hello @aiad_development,

Thanks for writing in! To get your issue resolve, please check out this thread instead:

• Contact Form 7 Spinner

Best Regards.

[kevinkputnam]

Not a mod, but this might help. I added the top: and right: to align it next to your submit button.

form.submitting .wpcf7-spinner {
    visibility: visible;
}
.wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0 24px;
    top: 8px;
    right: 14px;
    position: relative;
}
.wpcf7-spinner::before {
    content: '';
    position: absolute;
    background-color: #fbfbfc;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 100%;
    transform-origin: 8px 8px;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

[aiad_development]

Thank you very much!

[kevinkputnam]

Glad it worked. Add the

    top: 8px;
    right: 14px;

to .wpcf7-spinner and it will line up nicely with your submit button.

[tristup]

Hi Kevin,

Glad that you help.

Thanks