CODEWITHSUNDEEP
css
arj
arj

Reputation: 983

Place text blow the spinner image

I have a spinner using img tag.Using css style for spinning the image.Existing CSS are given below

.rotate {
  animation: rotation 9s infinite linear;
  top: 390px;
  left: 665px;
  width: 111px;
  height: 120px;
}

.spinnerlogo {
  position: absolute;
  width: 42px;
  height: 48px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

I am trying to add a text just below the rotate style.

Added below style for that.it wont work and image showing at the right side.

.rotate p {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  margin: 0;
}

html code given below

<div>
    <div *ngIf="isLoading" class="spinner-wrapper">
        <img alt="rotate" src="img.svg" class="rotate">   
        <img alt="spinnerlogo" src="img.svg " class="spinnerlogo">
        <p>text</p>
    </div>
    
</div>

Is there any way to solve this issue. did i miss anything from the above code. please suggest

Upvotes: 0

Views: 193

Answers (1)

Brett Donald
Brett Donald

Reputation: 14107

Without a diagram or a better explanation of what you want, it's pretty hard to help you. As others said in the comments, your style rule for the paragraph won't work as-is, so just add a class to the paragraph and create style rules for that class.

If you add a snippet to your question, that will help enormously too. Try running this one. Now we can all see what your code does, and hopefully now you can now use this to describe for us what you actually want to do.

.rotate {
  animation: rotation 9s infinite linear;
  top: 390px;
  left: 665px;
  width: 111px;
  height: 120px;
}

.spinnerlogo {
  position: absolute;
  width: 42px;
  height: 48px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.sometext {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  margin: 0;
}
<div>
    <div *ngIf="isLoading" class="spinner-wrapper">
        <img alt="rotate" src="https://upload.wikimedia.org/wikipedia/commons/8/84/Fidget_spinner.svg" class="rotate">   
        <img alt="spinnerlogo" src="https://upload.wikimedia.org/wikipedia/commons/8/84/Fidget_spinner.svg" class="spinnerlogo">
        <p class="sometext">text</p>
    </div>
    
</div>

Upvotes: 1

Related Questions