Css loading spinner with text

.centered {
  text-align: center;
}

.spinner.loading {
  display: none;
  padding: 50px;
  text-align: center;
}

.loading-text {
  width: 90px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 45px);
  text-align: center;
}

.spinner.loading:before {
  content: "";
  height: 90px;
  width: 90px;
  margin: -15px auto auto -15px;
  position: absolute;
  top: calc(50% - 45px);
  left: calc(50% - 45px);
  border-width: 8px;
  border-style: solid;
  border-color: #2180c0 #ccc #ccc;
  border-radius: 100%;
  animation: rotation .7s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Source: stackoverflow.com

Similar codes

0 vote338 views2 answers
How to Reveal Content on Hover with Expanding Corner Tabs in Divi
CSS
0 vote355 views1 answer
Css select first immediate child
CSS
0 vote380 views1 answer
Css bootstrap carousel fade how to add fade in up text
CSS
0 vote346 views1 answer
Poretty print css
CSS
0 vote444 views1 answer
Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations
CSS
1 vote348 views2 answers
Scale textarea
CSS
0 vote342 views1 answer
How to make bootstrap cards same height css trics
CSS
1 vote340 views1 answer
Ul li dot seprator
CSS
0 vote330 views1 answer
Style jQuery draggable clone
CSS
0 vote366 views10 answers
Stack Overflow
CSS