CODEWITHSUNDEEP
htmlcssbootstrap-4
renathy
renathy

Reputation: 5355

Bootstrap spinner overlay form (not whole page)

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>

Upvotes: 2

Views: 7871

Answers (1)

tsu
tsu

Reputation: 1251

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%);
}

Upvotes: 3

Related Questions