i written a code to make a loader in css. i tried to rotate the internal div 360deg but it is rotating outside of the main div .have used position

Question

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html {
    font-size: 50px;
  }
  body,
  html {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: black;
  }
  .maindiv {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: pink;
    position: relative;
  }
  .internalcircle {
    width: 3.5rem;
    height: 3.5rem;
    background-color: black;
    border-radius: 50%;
    animation: introtate 2s linear infinite alternate;
    position: absolute;
    transform-origin: center;
    transform: translate(-50% -50%);
  }
  @keyframes introtate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>

i wanted the inner circle div to rotate 360 deg so as to make a loader effect but the inner circle is going out of the main div even though i used the position:relative to the main-div. what should i do

i wanted to make a css loader. i tried to make the inner div to rotate 360deg in such a way that it makes a loader effect. i tried experimenting with transform-origin but still it rotates out of the main-div

Answer 1

You don't need to use position, display: grid can layer the elements.

Also, separate out the transforms translate, rotate etc. which can now be used individually. However, without position, transform: translate (or just translate) is actually not required.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 50px;
}

body,
html {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: black;
}

.maindiv {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: pink;
  position: relative;
  display: grid;
  place-items: center;
}

.internalcircle {
  width: 3.5rem;
  height: 3.5rem;
  background: conic-gradient(black 1deg, white 1deg, white 5deg, black 2deg);
  border-radius: 50%;
  animation: introtate 2s linear infinite alternate;
}

@keyframes introtate {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

<div class="maindiv">
  <div class="internalcircle"></div>
</div>

Answer 2

try using position:relative in .innercircle and adjust it fron the inspector