css - 直观地指示 IFrame 内的表单正在提交，但没有 javascript

Question

我在沙盒化页面中有一个 iframe 以禁止 JavaScript。

当用户点击表单的提交按钮时，没有视觉指示器提示用户正在发生某些事情。

有没有一种方法可以在不启用 javascript 的情况下使用 CSS 来显示正在发生的事情？

例如1:按钮上的动画在用户单击它时启动并运行 5 秒。2:<form> 上的伪元素只有在提交表单时才会出现。3:在尝试导航时以不同方式设置 IFrame 的样式。

有什么吗？

Answer 1

你可以试试下面的方法:

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>