Bootstrap spinner overlay form (not whole page) - html

Question

I would like to have bootstrap spinner that is on top of the form (it overlays form). However, the only thing I was able to get is to overlay the whole page. I am using Bootstrap.
<style>
.overlay {
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 40%;
left: 0px;
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
<div class="overlay" id="loading" >
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status" >
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<form method="post">
<div class="form-group">
<label for="num">Enter number <span>?</span></label>
<input id="num" type="text" class="form-control"/>
</div>
<button type="submit" class="btn btn-primary">Check </button>
</form>

Answer 1

U should put the spinner inside your form like this
<form method="post">
<div class="overlay" id="loading" >
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status" >
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="num">Enter number <span>?</span></label>
<input id="num" type="text" class="form-control"/>
</div>
<button type="submit" class="btn btn-primary">Check </button>
</fieldset>
</form>
then give the spinner an absolute position
form {
position: relative;
border: 1px solid red
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
opacity: 0.5;
transform: translate(-50%, -50%);
}