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 set all columns to be the same height? [duplicate]

    How to get MathJax's HTML output just like Stackedit.io?

    How can I select every other element that does not have a specific class?

    How do I design my CSS with ASP.NET MVC?

    How can I achieve this Flash effect using jQuery?

    how to put image on button? (css)

    How do I select an element in the dom with an attribute of ct:value?

    How to display a horizontal line before and after a heading in css

    How to override the default css class using c#

    How to indent text exactly one character width

    How to make a picture hover over others without moving the other pictures?

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

    How to implement block style for list

    CSS - How do I style a select to fully occupy the td it is in

    How can I show a element on my site when hovered with only JS?

    How to get rid of the white vertical stroke after every repeating background image done with repeat-x value in CSS?

    How do you close the CSS preview view in Eclipse?

    How to get uncompressed css output while using LESS(less-watch-compiler.js)?

    How to change the style of an active menu with php + css

    how to make an image “coming” to foreground

    How to test a webpage for different aspect ratios

    Switching styles (Class) on a function that show and hide a div tag content

    CSS Icons are working locally in the app, but are not showing on Heroku?

    How to insert line breaks in HTML documents using CSS

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    How to set style for a column in an extjs 4 grid [closed]

    How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

    how to center a box using blueprint css framework

    How to add the footer with social icons in bootstrap?

    How to have div horizontally scroll when resized.