Customize css loader in angular - css

Question

I have this loader working fine.
CSS:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div *ngIf="somevalue" class="loader"></div>
Now I need put some text in center
but my try not working. How Can I let my loader like in second image? I dont want install more external components, md-progress-loader, md-circle...etc.. TRY IT

Answer 1

A very simple solution is to just place the text into another div and position it accordingly - something like
<div class="container">
<div class="loader"></div>
<div class="description">Text</div>
</div>
and
.description
{
position: absolute;
top:0;
left:0;
line-height:150px;
width:152px;
text-align:center;
}
.container
{
position:relative;
}

Answer 2

This counters the rotation and provides a roughly sane box in which other elements can be placed.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader div {
display: block;
animation: spin 2s linear infinite reverse;
position: relative;
height: 100%;
}
.loader div span {
display: inline-block;
text-align: center;
}
<div *ngIf="somevalue" class="loader"><div><span>testing lots of text in this text box</span></div></div>