CODEWITHSUNDEEP
htmlcss
user3697569
user3697569

Reputation:

How to set a spinner into the middle of the screen with CSS?

i need some CSS help, i have a spinner for the loading page, centered totally, it is centered vertically, but now how can i center that spinner for all possible screen widths?

This is my markup:

<!DOCTYPE html>
<html>

  ...

  <body>

    <div class="loading">
      <div class="loader"></div>
    </div>

    ...

  </body>
</html>

and this is my stylesheet:

.loading {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999999999;
  overflow: hidden;
  background: #fff;
}
.loader {
  font-size: 10px;
  border-top: .8em solid rgba(218, 219, 223, 1);
  border-right: .8em solid rgba(218, 219, 223, 1);
  border-bottom: .8em solid rgba(218, 219, 223, 1);
  border-left: .8em solid rgba(58, 166, 165, 1);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 8em;
  height: 8em;
  display: block;
    position: absolute;
    top: 50%;
    margin-top: -4.05em;
}

Upvotes: 24

Views: 86694

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240928

Since the element has a fixed width of 8em, you could add left: 50% and then displace half of the element's width using margin-left: -4px:

Updated Example

.loader {
  left: 50%;
  margin-left: -4em;
}

If the dimensions of the element aren't fixed and known in advance, see my other answer for alternative options.

Upvotes: 45

Related Questions