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


Tags: html,css

Problem :

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



Solution :

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


    CSS Howto..

    How to hide all checkboxes using CSS

    how to get 2 div's text to align along the bottom?

    How to remove a element after animation?

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    How can I customize COUNT nodes with css

    How to target CSS module classes after they are hashed?

    How to create a multiple columns with HTML CSS

    How can i put random values to css properties using JQuery?

    How set font-size in TinyMce

    How to link to a CSS if a certain condition happens?

    How do I output compressed CSS from Compass?

    How to use Css to make CellList flow Horizontally rather than Vertically? (GWT & CSS)

    Email-box shows at “random” place

    jQuery .css, how to translate it into Javascript

    How to find all next siblings from a particular class using css selectors

    CSS border - how to populate content inside div with border

    How does this wheel menu get the name

    How to add html classes to a Django template 'for-loop' dynamically?

    How to disable caching of static assets like .css and .js in JSF2?

    How to open html document within

    How to fix too long css dropdown in Foundation 4 top bar?

    How to configure simple_form to show validation status

    How do I make a Javascript alert display only once, ever? [closed]

    How to set variables in LESS from a dynamic website?

    How to replace non-existing images with a default one in css?

    How to style last tag img css?

    How to create a loading image sprite using background position

    How to use form-inline bootstrap 3?

    How to set padding-left to my custom textbox in css?

    How to convert CSS class to id?