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 can i get target with a hover an element under an element?

    How is this font face in CSS3 embedded into a css file?

    How do I properly reference files in subdirectories (in xampp) for PHP, CSS, etc. on localhost?

    How to force margins to be ready from js before document ready

    How to resize a Java Script element to fit its container window

    How to render CSS conditionally in page

    How to have fluid height in css?

    Hide and show when click a button

    How to hide first level span element by CSS “>” selector

    How to add Background Image in css using master page

    How can I get this style effectv with css or jquery?

    How page turn effect work in turn.js

    How to make a basic event calendar with javascript, jquery, html and css?

    How can I change the colour of a line that starts with specific characters in javascript/css?

    how do i suppose to make the 4 box be responsive?

    jQuery date picker show half day blocked

    How can i make infinite flowing background with only CSS?

    How to select nth child with css? [duplicate]

    How to locate the element within CSS using javascript

    How to use css for the hover effect in another div?

    How to stop one layer going over another

    How to push elements after absolute element

    How to feature detect for CSS custom properties? [duplicate]

    how to switch to another view using css class on click in angularjs using ngclass

    How to fix clickable background with Wordpress theme and CSS

    How to fit these divs inside a div to occupy whole horizontal width

    CSS: How do I make a !100% header with a repeat-x background and tip

    how do i prevent respond.js reading my retina display media query?

    CSS - How to make IE7 respect min-width

    HTML CSS How to stop a table to put the content after it on a new line?