Tim Marshall Tim Marshall - 6 months ago 19
HTML Question

Cannot Move CSS Loader Container

I have a problem regarding the positioning of my container.

Keeping the styles whilst removing the

position: absolute;
on the
.dot
seems to be proving rather tricky and with each attempt the
dot
s are going all over the place!

To clarify, I'm looking at being able to move the entire loader



.sampleContainer {
float: left;
height: 40px;
width: 60px;
background: white;
}
.loader {
display: inline-block;
float: left;
margin-left:100px;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 4px;
background: #888;
position: absolute;
}
.dot_1 {
animation: animateDot1 1.5s linear infinite;
left: 12px;
/**background: #e579b8;**/
}
.dot_2 {
animation: animateDot2 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
.dot_3 {
animation: animateDot3 1.5s linear infinite;
left: 12px;
}
.dot_4 {
animation: animateDot4 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
@keyframes animateDot1 {
0% { transform: rotate(0deg) translateX(-12px); }
25% { transform: rotate(180deg) translateX(-12px); }
75% { transform: rotate(180deg) translateX(-12px); }
100% { transform: rotate(360deg) translateX(-12px); }
}
@keyframes animateDot2 {
0% { transform: rotate(0deg) translateX(-12px); }
25% { transform: rotate(-180deg) translateX(-12px); }
75% { transform: rotate(-180deg) translateX(-12px); }
100% { transform: rotate(-360deg) translateX(-12px); }
}
@keyframes animateDot3 {
0% { transform: rotate(0deg) translateX(12px); }
25% { transform: rotate(180deg) translateX(12px); }
75% { transform: rotate(180deg) translateX(12px); }
100% { transform: rotate(360deg) translateX(12px); }
}
@keyframes animateDot4 {
0% { transform: rotate(0deg) translateX(12px); }
25% { transform: rotate(-180deg) translateX(12px); }
75% { transform: rotate(-180deg) translateX(12px); }
100% { transform: rotate(-360deg) translateX(12px); }
}

<div class="sampleContainer">
<div class="loader">
<span class="dot dot_1"></span>
<span class="dot dot_2"></span>
<span class="dot dot_3"></span>
<span class="dot dot_4"></span>
</div>
</div>




Answer

you need to set position:relative to parent, otherwise it will be out of the DOM flow.

As for my tests you don't need the .loader CSS

.sampleContainer {
  float: left;
  height: 40px;
  width: 60px;
  background: white;
  position: relative;
  background: lightblue;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #888;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 15px 8px
}
.dot_1 {
  animation: animateDot1 1.5s linear infinite;
  left: 12px;
  /**background: #e579b8;**/
}
.dot_2 {
  animation: animateDot2 1.5s linear infinite;
  animation-delay: 0.5s;
  left: 24px;
}
.dot_3 {
  animation: animateDot3 1.5s linear infinite;
  left: 12px;
}
.dot_4 {
  animation: animateDot4 1.5s linear infinite;
  animation-delay: 0.5s;
  left: 24px;
}
@keyframes animateDot1 {
  0% {
    transform: rotate(0deg) translateX(-12px);
  }
  25% {
    transform: rotate(180deg) translateX(-12px);
  }
  75% {
    transform: rotate(180deg) translateX(-12px);
  }
  100% {
    transform: rotate(360deg) translateX(-12px);
  }
}
@keyframes animateDot2 {
  0% {
    transform: rotate(0deg) translateX(-12px);
  }
  25% {
    transform: rotate(-180deg) translateX(-12px);
  }
  75% {
    transform: rotate(-180deg) translateX(-12px);
  }
  100% {
    transform: rotate(-360deg) translateX(-12px);
  }
}
@keyframes animateDot3 {
  0% {
    transform: rotate(0deg) translateX(12px);
  }
  25% {
    transform: rotate(180deg) translateX(12px);
  }
  75% {
    transform: rotate(180deg) translateX(12px);
  }
  100% {
    transform: rotate(360deg) translateX(12px);
  }
}
@keyframes animateDot4 {
  0% {
    transform: rotate(0deg) translateX(12px);
  }
  25% {
    transform: rotate(-180deg) translateX(12px);
  }
  75% {
    transform: rotate(-180deg) translateX(12px);
  }
  100% {
    transform: rotate(-360deg) translateX(12px);
  }
}
<div style="float:left">Deleting 'Folder Name' folder</div>
<div class="sampleContainer">
  <div class="loader">
    <span class="dot dot_1"></span>
    <span class="dot dot_2"></span>
    <span class="dot dot_3"></span>
    <span class="dot dot_4"></span>
  </div>
</div>