Link to home
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
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

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
User generated image
In your code, that will go where you have
    headers["Authorization"] = "Bearer " + this.accessToken;
    fetch(this.action, {
      method: "POST", // or 'PUT'
      headers,
      body: formdata,
    })
      //.then((response) => response.json())
      .then((data) => {
        console.log("Success:", data);
        confirm("Form submitted. Thank you!");
        this.resetForm();
      })

Open in new window



Avatar of Steve Hougom

ASKER

I added the following lines of code to my embedded my-form.js and re-ran but it wont show the spinner.


submitForm methed lines 466,467, 508.

User generated image
Render method line 538.

User generated image

Added the embedded css in the file too:

User generated image

I do see an error in the console though.
User generated image






Line 138 in the console.  my-form.js  may have nothing to do with the above changes but its the only error i found.

User generated image

Rest of the console below:

User generated image
If i comment out the following js it at least loads the graphic.

User generated image



User generated image
Can you render your code to just html/js/css to shre or better put a sample page on a your public test URL or use codepen or other playground. We just need the rendered code, not the uncompiled js.  It will make it easier to see what is going on.
Yea i was about to put on codepen the problem is everything is in js file.  But i will see if i can somehow simulate that on codepen.
Right, you just need to render it. In other words, view the source in the browser, copy and paste if that is easier.
When running it on localhost it pauses on exception here.

User generated image
Your spinner is probably not defined properly.

Does the console give you any clues?
ASKER CERTIFIED SOLUTION
Avatar of Steve Hougom
Steve Hougom
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial