CODEWITHSUNDEEP
htmlcssspinner
Qiushi Li
Qiushi Li

Reputation: 15

Add text to the right of the loading spinner

I have done some research and ended up with this but the text is at the bottom of the loading spinner, I want to align the text to the right of the loading spinner like the one in this image, can anyone help with that? Thanks in advance.

.preloader-wrapper { 
    background: rgba(22, 22, 22, 0.3); 
    width: 100%; height: 100%; 
    position: fixed; 
    top: 0;
    left: 0;
    z-index: 10;
}

.preloader-wrapper > .preloader { 
    background: transparent url(https://graphiclineweb.files.wordpress.com/2013/10/ajaxloader.gif?w=604) no-repeat center top;
    position: absolute;
    min-width: 128px; /* image-width of loader */
    min-height: 128px; /* image-height of loader */
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding-top: 148px; /* 128px image-height of loader + 20px margin */
    text-align: center;
}
.preloader-wrapper::after{
  content: "loading text";
}
<div class="preloader-wrapper">
    <div class="preloader">
       Loading...<br/>
       And whatever you want to have here.
    </div>
</div>

Upvotes: 0

Views: 3206

Answers (2)

Harsh kurra
Harsh kurra

Reputation: 1216

I have created a new fiddle based on your code, I have made the parent a flex item that will have 2 child items in the horizontal direction aligned at the center both horizontally and vertically, please read the concept of Flexbox to understand it better

  .preloader-wrapper {
      display: flex;
      justify-content: center;
      background: rgba(22, 22, 22, 0.3);
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      align-items: center;
    }

    .preloader-wrapper>.preloader {
      background: transparent url(https://graphiclineweb.files.wordpress.com/2013/10/ajaxloader.gif?w=604) no-repeat center top;
      min-width: 128px;
      min-height: 128px;
    }
    <div class="preloader-wrapper">
      <div class="preloader">

      </div>
      <div class="text">
        Loading...<br/> And whatever you want to have here.
      </div>
    </div>

Upvotes: 1

Aer0
Aer0

Reputation: 3907

Instead of using absolute positions and positioning the text itself through a padding, you should use flexbox for centering.

The following will simply display anything within your wrapper centered (horizontally as well as vertically).

.preloader-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

That said you'd still need to move your text into a dedicated container as well so your markup could look like this.

<div class="preloader-wrapper">
  <div class="preloader">
  </div>
  <div class="preloader-text">
      Loading...<br/> And whatever you want to have here.
  </div>
</div>

Demo

Upvotes: 2

Related Questions