我在一个页面中有一个iframe,它是Sandbox ,不允许使用JavaScript.
当用户单击表单的提交按钮时,用户看不到发生了什么事情的视觉指示器.
有没有一种方法可以在不需要启用javascript的情况下使用CSS来显示正在发生的事情?
例如
有什么事吗?
我在一个页面中有一个iframe,它是Sandbox ,不允许使用JavaScript.
当用户单击表单的提交按钮时,用户看不到发生了什么事情的视觉指示器.
有没有一种方法可以在不需要启用javascript的情况下使用CSS来显示正在发生的事情?
例如
有什么事吗?
您可以try 以下操作:
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>