Question 183750 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – CSS-Spinner with static text inside

I try to get a very simple loading animation that is implemented with CSS.

.spinner
{
    border: 5px solid red;
    border-top: 5px solid green;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 3s linear infinite;
}
@keyframes spin
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
123

<div class="spinner">abc</div>

987

Any way I get the text inside the spinner to be static and not turning without having another element outside the spinner?

I do not want to integrate libs for that. But I use jQuery if that helps. But it should be simple and easy.

Tags:

2

Answers


  1. 0

    You could use a wrapper element to position your elements inside it.

    .spinner {
  right: 0;
  border: 5px solid red;
  border-top: 5px solid green;
  border-radius: 50%;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner-container {
  position: relative;
  width: 35px;
  height: 35px;
}

.spinner-container p {
  display: flex;
  justify-content: center;
  align-items: center;
}

.absolute {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
    123

<div class="spinner-container">
  <div class="spinner absolute"></div>
  <p class="absolute">abc</p>
</div>

987
    Login or Signup to reply.
  2. 0

    You can use ::before to add a spinner around text.
    here is a sample code

       

 .spinner
    {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background-color: aliceblue;
            border-radius: 50%;
    }

   

.spinner::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            z-index: -100;
            bottom: -10px;
            background: rgb(82,210,56);
            background: linear-gradient(15deg, rgba(82,210,56,1) 0%, rgba(135,107,184,1) 11%, rgba(106,190,96,1) 43%, rgba(209,35,35,1) 79%, rgba(217,186,173,1) 100%);
            border-radius: 50%;
            transform-origin: center center;
            animation: spin 2s linear infinite;
    }
    @keyframes spin {
           0% {
              transform: rotate(0);
           }
           100% {
              transform: rotate(360deg);
           }
    }
    <div class="spinner">
asdasd
<br>
asdasd
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search