Kann CSS Loader Container nicht verschieben

Ich habe ein Problem bezüglich der Positionierung meines Containers.Kann CSS Loader Container nicht verschieben

Halten Sie die Stile beim Entfernen der position: absolute; auf der .dot scheint sich als schwierig erweisen und mit jedem Versuch die dot s gehen überall hin!

Um zu klären, ich bin auf der Suche auf dem gesamten 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>

Quelle

2016-05-31 Anonymous

Wo wollen Sie es bewegen? –

@HunterTurner Nun, auf meiner Seite habe ich versucht, es zu schweben, Rand oder was zu setzen, damit es nichts anderes zeigt. Sehen Sie dies schnell [JSFiddle] (http://jsfiddle.net/xy3wctqw/) –

Haben Sie versucht, Position: relativ zur Loader-Klasse hinzuzufügen? –

Sie position:relative zu Eltern festlegen müssen bewegen kann, sonst wird es aus dem DOM Fluss sein.

Was meine Tests, die Sie brauchen nicht die .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>

Quelle

2016-05-31 22:11:17 dippas

Wenn Sie auf Ihrer Version bemerken, sind die Punkte nicht mehr gleichmäßig verteilt, eines der Probleme, die ich erlebt habe. –

@TimMarshall gelöst. siehe aktualisierte Antwort – dippas

Vielen Dank :) –

Kann CSS Loader Container nicht verschieben

Antwort

Verwandte Themen