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 vote132 views1 answer
.sidebar { --offset: 2rem; flex-grow: 1; flex-basis: 300px; align-self: start; position: sticky; top: var(--offset); }
CSS
3 votes135 views1 answer
Vh and vw
CSS
0 vote132 views1 answer
Css a tag id selector scrolls too far
CSS
0 vote144 views1 answer
Html css psd
CSS
0 vote148 views1 answer
Css vertical align with flexbox
CSS
1 vote147 views2 answers
Scss exceeded maximum budget. Budget 7.00 kB was not met by 841 bytes with a total of 7.82 kB.
CSS
90 votes136 views6 answers
Center text
CSS
0 vote158 views2 answers
Css counters
CSS
-2 votes151 views1 answer
Div color overlay css
CSS
0 vote147 views1 answer
Service Worker Navigator check
CSS