Customize css loader in angular

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

Jakub Judas · Accepted Answer · 2018-04-08 18:32:26Z

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;
}

answered Apr 8, 2018 at 18:32

Jakub Judas

7876 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jakub Judas Over a year ago

@DiegoVenâncio Can you clarify in what way it isn't working? Here is a plunkr with the full setup plnkr.co/edit/K2k2Q7eWg8zp2peQCSZY?p=preview

wizzwizz4 · Accepted Answer · 2018-04-08 19:07:20Z

1

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>

answered Apr 8, 2018 at 19:07

wizzwizz4

6,5212 gold badges29 silver badges68 bronze badges

2 Comments

Diego Venâncio Over a year ago

Your code appear all right but my 'text' are twirl together loader.

wizzwizz4 Over a year ago

@DiegoVenâncio Could you clarify? I don't see what you mean by "twirl together loader".

Collectives™ on Stack Overflow

Customize css loader in angular

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related