我构建了一个微调器并使用 CSS 对其进行了动画处理,现在我尝试隐藏微调器并在单击按钮时显示它。到目前为止,我已经编写了这段代码,当我单击提交时它没有显示<button>
我用 display:none 隐藏了微调器,并尝试使用 JavaScript 将 更改为<div>,display:block但它不起作用。
CSS:
* {
margin: 0;
padding: 0;
}
.loader {
display: none;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.loading {
border: 2px solid #ccc;
width: 60px;
height: 60px;
border-radius: 50%;
border-top-color: #1ecd97;
border-left-color: #1ecd97;
animation: spin 1s infinite ease-in;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Run Code Online (Sandbox Code Playgroud)
JavaScript:
function spinner() {
document.getElementsByClassName("loader").style.display = "block";
} …Run Code Online (Sandbox Code Playgroud)