Show loader for custom scripts

[fotodng]

I’ve a page with a custom template (in my Alyeska child theme) with a form for send data and files (photos for a contest), all works fine, but when the form is uploading nothing show until is completed upload (I show a correct or problem message). Is possible show any modal layout with spin loading, some message or something similar with the framework? (I know that I can wp enqueue my custom css and script for make this).
Thanks a lot.

Best Regards, Carlos Longarela.
Foto DNG Magazine

Topic

[Jason Bobich]

Hello,

The theme does actually have a little loader you can use in your markup if you want. It would just be something like this:

<div class="tb-loader"></div>

http://www.themeblvd.com/demo/alyeska/test/

[fotodng]

Ok, thanks a lot Jason.

Best Regards.

[fotodng]

All perfect, I added the code to my custom page template (next to the_content() inside entry-content):

<div id="cargando" class="tb-loader"></div>

Next I put in the form:

onsubmit="jQuery('#cargando').show();"

An in my custom css some transparency to the div (and hidden div):

#cargando {display: none; background-color:rgba(255,255,255,0.8);}

And when the form is uploaded, show the div with some transparency, and when the form is completely uploaded hidden it (default hidden div).

View Screen Capture

[Author]

Replies