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:
<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..
you don't have to put pseudo classes at the end of a style definition, you could use CSS div.someDiv:hover div.someContainedDiv{ /*this will target div.someContainedDiv when div.somediv is in a hover...
The data URLs allow embedding actual resource data into a URL itself. It's very handy for small resources, but less so for big ones, since they are encoded as base64...
In PHP, you should reference files from the Document_Root that is specified (C:\xampp\htdocs in your case). So try require_once "/lorem_ipsum/phplogin.php"; The url in the css should work if the file...
I made this example http://jsfiddle.net/efortis/kUfdE/ First, hide it by default in the CSS with display:none .orangeBox{ background: orange; display: none; } Then display it with javascript, equivalent to .css('display', 'block')...
You can try a jquery solution, I am not quite sure what u r trying to achieve but hope this helps. Demo: https://jsfiddle.net/po6vdyo9/ $(document).ready(function() { $(window).resize(function() { // Height will...
Like others said, you can't use server-side code in CSS. What you did is almost correct, if you make sure the string is accessible from the code behind: protected string...
I've come across this similar issue in my work. Unfortunately there is no clean solution with just CSS. You can use some javascript that will fire during the onresize event...
I have made small changes like change the document event and add e.stopPropagation(). Please check. $('.subnav__right li a').click(function(e){ e.preventDefault(); e.stopPropagation(); var $this = $(this).parent().find('.subnav__hover'); $('.subnav__hover').not($this).hide(); $this.toggle(); }); $(document).click(function (e) {...
What your current CSS selector is saying is: Hide all spans that are children of li that are descendants of .sidebar-nav. If you only want to target first level li...
Like Kartikeya and Neophyte said in the comments, this case might just be about the incorrect path you've set your background image to be searched for. Try the background-image: url(../images/image.jpg);...
It uses a jQuery plugin called Masonry ... very good plugin indeed ... Here is the link to the page -> http://masonry.desandro.com/...
I found that rotation the page that is below is in different div, the current page with positive and negative rotation is only for clipping the current page.
https://fullcalendar.io/ Try out this plugin, it should fit your needs. $('#calendar').fullCalendar({ editable: false // put further options and callbacks here }) ...
Get the text from the paragraph, split the lines and check the first character and add a class : $('.server-diff p').text(function(_,txt) { var lines = txt.split('\n'); $.each(lines, function(i, line) {...
Are you looking for something like this? http://jsfiddle.net/62uzV/ .span3{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } footer { width:100%; height:100%; min-height:150px; padding:30px 0 80px; color:#fff; font-size:14px; line-height:1.6; background:#222; position:relative; }...
You can apply css's background : linear-gradient property to div as below: .css-class-to-highlight a{ background : linear-gradient(red 50%, green 50%); background-image :none !important; color: White !important; font-weight:bold !important; } You...
This should fit your slowly moving+infinite flowing+responsively fit to height background criteria. html, body { height: 100%; margin: 0; padding: 0; } #animatedBackground { width: 100%; height: 100%; position: absolute;...
Demo #topdiv .middlediv > div:nth-child(2) { font-weight:bold; color:red; } You need to use # for id and . for class Just to explain n+2 will select all the siblings following...
There are a few browser differences when getting styles. To get a style rule generically: function getStyleRule(s) { var sheet, sheets = document.styleSheets; var ruleProp, rule, rules; for (var i=0,...
+ because ex2 next to ex @media screen and (max-width: 780px){ .ex2 ul li{ display: none; } .ex:hover + .ex2 > ul > li{ display: block; } } EDIT: working...
the problem is due to the "float:left" on your #content-3f. The float needs to be cleared for this to work. Here's your solution:: HTML <div id="content-3f"> <div id="content-3-1f"><a href="aboutus.aspx"></a></div> <div...
From your code it appears that you want the section elements to take up the full screen height. You don't need positioning to do that. Viewport units now have excellent...
You can reliably use CSS.supports() in JavaScript or @supports in CSS to detect support for custom properties. Every version of every browser that supports custom properties also supports this method...
Try this? <div class="mobile-area"> <p>Mobile App</p> <a class="mobile-icon current-device" href ng-click="iphoneView=true;tabletView=false"></a> <a href ng-click="tabletView=true;iphoneView=false" class="tablet-icon"></a> </div> <div class="mobile-preview"...
Remove fixed from background: white url(http://www.affiliago.it/accounts/default1/banners/SKIN_BAKECA.jpg) no-repeat fixed; In your body style. UPDATE: Add in your css: .myClass{ background-color:white; width:994px; margin:0 auto; } And add those styles to: <div class="clear">...
On .screen, add overflow: hidden and remove float: left. See: http://jsfiddle.net/thirtydot/s3zUd/1/ More information....
You could give the .grid-container a right margin equal to the width of the .header_arrow, and make the right margin of that equal to its width header .grid-container { height:...
You could add a class specific to IE detection (if you haven't already) to your html tag with jQuery, a lot like Modernizr does for browser capabilities. Then wrap the...
Ah Yes.. I ran into this a while ago check out this link http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx Essentially ... you need to include this shim in JS to manually hack the rule Below...
So you want the anchor to be right to the table? Use the CSS-argument "float". <table style="float:left"></table> <tag></tag> http://css.maxdesign.com.au/floatutorial/...