Start Free TrialLog in
Avatar of Steve Hougom
Steve HougomFlag for United States of America

asked on 

Help adding loading spinner to a JS rendered html form

I have an html form that gets rendered from JS that im struggling to add a loading spinner to.

The html is rendered from JS.  The JS was handed down to me to use.

This is the submit method.  Im trying to show a page spinner when the its clicked on.

User generated image
JS file attached.  my-form.js
HTMLJavaScriptjQuery
Avatar of undefined
Last Comment
Steve Hougom
Avatar of Randy Downs
Randy Downs
Flag of United States of America image
Maybe you can get your js to insert the css for a spinner like this. If not you could add the css to your div.

There are a number of js spinners you could try from the js end

HTML
<div class="loader"></div>

Open in new window


CSS
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Open in new window

Avatar of Scott Fell
Scott Fell
Flag of United States of America image
There are two parts to this, the rendered html/js/css and how you get there by writing code for what looks like https://lit-element.polymer-project.org/guide or  https://lit.dev/

Your question here should really be how to do this with rendered html/js/css and you can work backward to put that into lit.

In any form of javascript, the way it works is to detect the click of the submit button, inject your animation to a button or other element, perform your ajax request, when you receive your response, close the animation and display your response.

Here is a codepen example I found that should get you going https://codepen.io/wang0nya/pen/bzwQPr