将Preloader限制为Parent

Question

链接到Codepen

在上面的Codepen/以下代码片段中，我有一个多步骤表单，在显示结果之前出现预加载器。现在它占据了整个视口——我正试图将它包含在表单框中。

如果我将它移动到表单中(在</form>之前)，它将加载到结果的下方而不是顶部。我还尝试将形式的position更改为absolute，然后依靠预加载器的position: relative属性，但这也不起作用。

有什么想法让这个显示在表单区域内吗?

let step = document.getElementsByClassName("step");
let prevBtn = document.getElementById("prev-btn");
let nextBtn = document.getElementById("next-btn");
let submitBtn = document.getElementById("submit-btn");
let form = document.getElementsByTagName("form")[0];
let bodyElement = document.querySelector("body");
let preloader = document.getElementById("form-preloader-pagewrap");
let successDiv = document.getElementById("results");
let resetBtn = document.getElementById("reset-btn");
form.onSubmit = () => {
return false;
};
let current_step = 0;
let stepCount = 3;
step[current_step].classList.add("hidden");
if (current_step == 0) {
prevBtn.classList.add("hidden");
submitBtn.classList.add("hidden");
nextBtn.classList.add("show");
}
nextBtn.addEventListener("click", () => {
current_step++;
let previous_step = current_step - 1;
if (current_step > 0 && current_step <= stepCount) {
prevBtn.classList.remove("hidden");
prevBtn.classList.add("show");
step[current_step].classList.remove("hidden");
step[current_step].classList.add("show");
step[previous_step].classList.remove("show");
step[previous_step].classList.add("hidden");
if (current_step == stepCount) {
submitBtn.classList.remove("hidden");
submitBtn.classList.add("show");
nextBtn.classList.remove("show");
nextBtn.classList.add("hidden");
}
} else {
if (current_step > stepCount) {
form.onSubmit = () => {
return true;
};
}
}
});
prevBtn.addEventListener("click", () => {
if (current_step > 0) {
current_step--;
let previous_step = current_step + 1;
prevBtn.classList.add("hidden");
prevBtn.classList.add("show");
step[current_step].classList.remove("hidden");
step[current_step].classList.add("show");
step[previous_step].classList.remove("show");
step[previous_step].classList.add("hidden");
if (current_step < stepCount) {
submitBtn.classList.remove("show");
submitBtn.classList.add("hidden");
nextBtn.classList.remove("hidden");
nextBtn.classList.add("show");
prevBtn.classList.remove("hidden");
prevBtn.classList.add("show");
}
}
if (current_step == 0) {
prevBtn.classList.remove("show");
prevBtn.classList.add("hidden");
}
});
submitBtn.addEventListener("click", () => {
preloader.classList.add("show");
const timer = (ms) => new Promise((res) => setTimeout(res, ms));
timer(3000)
.then(() => {
bodyElement.classList.add("loaded");
})
.then(() => {
step[stepCount].classList.remove("show");
step[stepCount].classList.add("hidden");
prevBtn.classList.remove("show");
prevBtn.classList.add("hidden");
submitBtn.classList.remove("show");
submitBtn.classList.add("hidden");
successDiv.classList.remove("hidden");
successDiv.classList.add("show");
});
var cards = $(".results-card");
function filterCards() {
var checked = $(".step :checkbox:checked");
if (checked.length) {
cards.hide();
checked.each(function () {
$("." + $(this).val()).fadeIn(500);
});
} else {
cards.fadeIn(500);
}
}
$(".step :checkbox").click(filterCards);
filterCards();
});

.hidden {
display: none;
}
.show {
display: block;
}
form {
width: 80%;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid #1e1e1e;
padding: 20px;
min-height: 350px;
}
#form-preloader-pagewrap {
width: 100%;
height: 100%;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
min-height: 350px;
background-color: blueviolet;
}
#form-preloader {
width: auto;
height: auto;
position: relative;
top: 50%;
left: 50%;
}
.loaded #form-preloader-pagewrap {
visibility: hidden;
transform: translateY(-100%);
transition: all 0.3s 1s ease-out;
}
.loaded #form-preloader {
opacity: 0;
transition: all 0.3s ease-out;
}
.results-cards-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.results-card {
flex: 0 1 24%;
flex-direction: column;
border: 1px dotted #1e1e1e;
margin: 10px;
padding: 15px;
}

<form>
<div class="step show">Form Introduction</div>
<div class="step hidden">
Step 1<br>
<input id="a" type="checkbox" value="a"><label for="a">A</label>
</div>
<div class="step hidden">
Step 2<br>
<input id="b" type="checkbox" value="b"><label for="b">B</label>
</div>
<div class="step hidden">
Step 3<br>
<input id="c" type="checkbox" value="c"><label for="c">C</label>
</div>
<div id="results" class="hidden">
<div class="results-cards-container">
<div class="results-card a b">A,B</div>
<div class="results-card a">A</div>
<div class="results-card a">A</div>
<div class="results-card b">B</div>
<div class="results-card b">B</div>
<div class="results-card b">B</div>
<div class="results-card c">C</div>
</div>
<a href="javascript:window.location.href=window.location.href">Start Over</a>
</div>
<div class="buttons">
<button id="prev-btn" type="button">Previous</button>
<button id="next-btn" type="button">Next</button>
<button id="submit-btn" type="button">Submit</button>
</div>
</form>
<div id="form-preloader-pagewrap" class="hidden">
<div id="form-preloader" class="show">
<i class="fas fa-spinner fa-pulse fa-8x" style="color: #fff"></i>
</div>
</div>

Answer 1

我建议:

• 将预加载器div移动到表单
• 添加position: relative到表单
• 将预加载器更改为position: absolute

修改后的代码:https://codepen.io/pawel7/pen/bGRBvpd.