CODEWITHSUNDEEP
htmlcss
user1836957
user1836957

Reputation: 547

How to prevent text from getting pushed left and right when adding text or removing text

I am working on front end part of a loading page in an Angular project. I want to show loading with three dots starting from one dot then two and then three to create a sense of loading. But when I add the dots the text of loading, it gets pushed to the left and as dots reduces to one the loading text is moving to the right.

The code is written in angular

Here is the code:

For HTML file:

<div class="textCamel">Loading<span id="loader-loading-dots"></span></div>

For CSS file: 

.textCamel {
    position:absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    margin: 0 auto;

}

For type script file 

 export class LoaderComponent implements OnInit {
    ngOnInit() {
        // TODO: start CSS animation
        this.initLoadingDots();
    }
    // This method initializes the loading dots animation
    initLoadingDots() {
        let x=0;
        setInterval(function() {
            let dots = "";
            x++;
            for (let y=0; y <= x%3; y++) {
                dots+=".";
            }
            $("#loader-loading-dots").text(dots);
        } , 500);
    }  
}

I really appreciate if anyone can offer some tips to fix this issue.

Upvotes: 0

Views: 502

Answers (1)

Temani Afif
Temani Afif

Reputation: 272909

You can use text-align:left instead and put everything inside a container that you align center and use fixed width to always have the same behavior.

Simply be sure the width you use will contain the maximum text (loading + the 3 dots) to avoid overflow even if it's not a big issue as by default the overflow is shown unless you have another style that hide it :

.textCamel {
  /*position:absolute; removed this to show the result of the 3 divs */
  width: 100%;
  text-align: center;
  font-size: 18px;
  margin: 0 auto;
}

.load {
  display: inline-block;
  text-align: left;
  width: 80px;
}
<div class="textCamel">

  <div class="load">Loading<span id="loader-loading-dots"></span></div>

</div>
<div class="textCamel">

  <div class="load">Loading<span id="loader-loading-dots">.</span></div>

</div>
<div class="textCamel">

  <div class="load">Loading<span id="loader-loading-dots">..</span></div>

</div>
<div class="textCamel">

  <div class="load">Loading<span id="loader-loading-dots">...</span></div>

</div>

Upvotes: 1

Related Questions