Visually indicate form inside IFrame is submitting, but without javascript-CodePudding

I have an iframe in a page that is sandboxed to disallow JavaScript.

When the user clicks the form's submit button there is no visual indicator to the user that something is happening.

Is there a way I can use CSS to show something is happening without requiring javascript to be enabled?

For example 1: An animation on the button that starts when the user clicks it and runs for 5 seconds. 2: A pseudo element on <form> that is only present when the form is being submitted. 3: Some way of styling the IFrame differently when it is attempting to navigate.

Anything at all?

CodePudding user response：

You can try something like below:

form {
 padding: 20px;
}
[type=submit] {
  padding: 10px 40px;
  border:none;
  font-size:20px;

  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  position:relative;
  overflow: hidden;
}
[type=submit]:before {
  content: "";
  position: absolute;
  right: -30px;
  width: 12px;
  aspect-ratio: 1;
  border: 4px solid;
  border-radius:50%;
  border-color: red red red #0000;
  animation: r 1s infinite linear;
  transition: 0s 5s; /* will disappear after 5s */
}
@keyframes r {
  to{transform:rotate(360deg)}
} 

/* on button click you show the loader */
[type=submit]:active:before {
  right: 12px;
  transition: 0s;
}

/* when someone navigate inside the iframe you can use hover on the html element */
html:hover {
  background:#fafafa;
}

<button type="submit" form="f1">Send</button>