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 vote183 views1 answer
Disable on print margin html
CSS
0 vote215 views1 answer
Position absolute above everything
CSS
0 vote253 views1 answer
Css 4 3 ratio
CSS
0 vote205 views1 answer
Build a responsive real world website from scratch html css
CSS
0 vote195 views1 answer
How to give a background color strip in html and css
CSS
-1 vote220 views1 answer
How to use a blank space with grid template areas css
CSS
2 votes209 views5 answers
Figma
CSS
0 vote242 views1 answer
Music-metadata-browser Buffer is not defined
CSS
-1 vote230 views4 answers
Center li in ul css
CSS
0 vote233 views1 answer
Css nth child range
CSS