css loading spinner with text

1.loader {
2  border: 16px solid #f3f3f3; /* Light grey */
3  border-top: 16px solid #3498db; /* Blue */
4  border-radius: 50%;
5  width: 120px;
6  height: 120px;
7  animation: spin 2s linear infinite;
8}
9
10@keyframes spin {
11  0% { transform: rotate(0deg); }
12  100% { transform: rotate(360deg); }
13}
14
15
16<div class="loader"></div>
17

1.centered {
2  text-align: center;
3}
4
5.spinner.loading {
6  display: none;
7  padding: 50px;
8  text-align: center;
9}
10
11.loading-text {
12  width: 90px;
13  position: absolute;
14  top: calc(50% - 15px);
15  left: calc(50% - 45px);
16  text-align: center;
17}
18
19.spinner.loading:before {
20  content: "";
21  height: 90px;
22  width: 90px;
23  margin: -15px auto auto -15px;
24  position: absolute;
25  top: calc(50% - 45px);
26  left: calc(50% - 45px);
27  border-width: 8px;
28  border-style: solid;
29  border-color: #2180c0 #ccc #ccc;
30  border-radius: 100%;
31  animation: rotation .7s infinite linear;
32}
33
34@keyframes rotation {
35  from {
36    transform: rotate(0deg);
37  }
38  to {
39    transform: rotate(359deg);
40  }
41}