How do I center and auto-resize this css loader?

Question

I'm new to css and I don't know how to center and make it auto-resize and I was wondering if you guys could help a gal out, anyways here's the css loader:

https://jsfiddle.net/4Ljayw2f

<div id="squaresWaveG">
<div id="squaresWaveG_1" class="squaresWaveG">
</div>
<div id="squaresWaveG_2" class="squaresWaveG">
</div>
<div id="squaresWaveG_3" class="squaresWaveG">
</div>
<div id="squaresWaveG_4" class="squaresWaveG">
</div>
<div id="squaresWaveG_5" class="squaresWaveG">
</div>
<div id="squaresWaveG_6" class="squaresWaveG">
</div>
<div id="squaresWaveG_7" class="squaresWaveG">
</div>
<div id="squaresWaveG_8" class="squaresWaveG">
</div>
</div>

#squaresWaveG{
position:relative;
width:240px;
height:29px}

.squaresWaveG{
position:absolute;
top:0;
background-color:#000000;
width:29px;
height:29px;
-moz-animation-name:bounce_squaresWaveG;
-moz-animation-duration:3.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-animation-name:bounce_squaresWaveG;
-webkit-animation-duration:3.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-animation-name:bounce_squaresWaveG;
-ms-animation-duration:3.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-animation-name:bounce_squaresWaveG;
-o-animation-duration:3.3s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
animation-name:bounce_squaresWaveG;
animation-duration:3.3s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#squaresWaveG_1{
left:0;
-moz-animation-delay:1.32s;
-webkit-animation-delay:1.32s;
-ms-animation-delay:1.32s;
-o-animation-delay:1.32s;
animation-delay:1.32s;
}

#squaresWaveG_2{
left:30px;
-moz-animation-delay:1.65s;
-webkit-animation-delay:1.65s;
-ms-animation-delay:1.65s;
-o-animation-delay:1.65s;
animation-delay:1.65s;
}

#squaresWaveG_3{
left:60px;
-moz-animation-delay:1.98s;
-webkit-animation-delay:1.98s;
-ms-animation-delay:1.98s;
-o-animation-delay:1.98s;
animation-delay:1.98s;
}

#squaresWaveG_4{
left:90px;
-moz-animation-delay:2.31s;
-webkit-animation-delay:2.31s;
-ms-animation-delay:2.31s;
-o-animation-delay:2.31s;
animation-delay:2.31s;
}

#squaresWaveG_5{
left:120px;
-moz-animation-delay:2.64s;
-webkit-animation-delay:2.64s;
-ms-animation-delay:2.64s;
-o-animation-delay:2.64s;
animation-delay:2.64s;
}

#squaresWaveG_6{
left:150px;
-moz-animation-delay:2.97s;
-webkit-animation-delay:2.97s;
-ms-animation-delay:2.97s;
-o-animation-delay:2.97s;
animation-delay:2.97s;
}

#squaresWaveG_7{
left:180px;
-moz-animation-delay:3.3s;
-webkit-animation-delay:3.3s;
-ms-animation-delay:3.3s;
-o-animation-delay:3.3s;
animation-delay:3.3s;
}

#squaresWaveG_8{
left:210px;
-moz-animation-delay:3.63s;
-webkit-animation-delay:3.63s;
-ms-animation-delay:3.63s;
-o-animation-delay:3.63s;
animation-delay:3.63s;
}

@-moz-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}

100%{
background-color:#FFFFFF;
}

}

@-webkit-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}

100%{
background-color:#FFFFFF;
}

}

@-ms-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}

100%{
background-color:#FFFFFF;
}

}

@-o-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}

100%{
background-color:#FFFFFF;
}

}

@keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}

100%{
background-color:#FFFFFF;
}

}

Sorry if I did the code thing wrong for the jsfiddle thingy

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Eilidh, Sep 01 '16 at 15:46
Answered here http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers — MooingRawr, Sep 01 '16 at 15:48
@MooingRawr are you sure you center the div? Cause last time I remmeber you centered it in the css code — Maria Acosta, Sep 01 '16 at 15:49

score 1 · Accepted Answer · answered Sep 01 '16 at 15:45

1

To center the element you just add margin:0 to the #squaresWaveG

#squaresWaveG{
position:relative;
width:240px;
height:29px;
margin:0 auto;
}

here is jsfiddle

answered Sep 01 '16 at 15:45

Zenel Rrushi

2,346
1
18
34

Thanks, but does it auto-resize? Like when the window is smaller like for mobile users – Maria Acosta Sep 01 '16 at 15:50
with this width is is good for mobile and it doesn't need to be smaller i think. Anyway if you want to do it you can use css media query – Zenel Rrushi Sep 01 '16 at 15:52
and how do I use css media query? – Maria Acosta Sep 01 '16 at 15:54
please read this http://www.w3schools.com/css/css_rwd_mediaqueries.asp to understand and know how to use media querys – Zenel Rrushi Sep 01 '16 at 15:55

How do I center and auto-resize this css loader?

1 Answers1