Menu
Below is the html in question
By default it appears as:
Which is completely wrong, it should be on two lines and it should also look "pretty" but it looks pretty ugly at the moment.
The aim of the box is so that it looks like a "Loading" box which after time (already incorporated into my main bit of code) for it to disappear once loaded, so the only problem with this at the moment is that it looks ugly and doesn't layout correctly :(
The reason I have two div blocks inside the main div is because they're going to be different size and color text (I think)
If anyone has a completely different looking loading message/bar/popup that they think I would like to use please feel free to post.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.loading1 a {
position: fixed;
cursor: pointer;
left: 50%;
top: 10%;
color: white;
padding-left: 5px;
}
.loading2 a {
position: fixed;
cursor: pointer;
left: 50%;
top: 10%;
color: white;
padding-left: 5px;
}
.loading {
z-index: 999;
position: fixed;
left: 50%;
top: 10%;
width: 150px;
height: 80px;
border: 1px solid white;
-moz-border-radius: 10px;
border-radius: 10px;
background: #D8B93F;
}
#circularG{
position:relative;
width:25px;
height:25px}
.circularG{
position:absolute;
background-color:#0E4216;
width:6px;
height:6px;
-moz-border-radius:4px;
-moz-animation-name:bounce_circularG;
-moz-animation-duration:1.12s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:4px;
-webkit-animation-name:bounce_circularG;
-webkit-animation-duration:1.12s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-o-border-radius:4px;
-o-animation-name:bounce_circularG;
-o-animation-duration:1.12s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-ms-border-radius:4px;
-ms-animation-name:bounce_circularG;
-ms-animation-duration:1.12s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
}
#circularG_1{
left:0;
top:10px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-o-animation-delay:0.42s;
-ms-animation-delay:0.42s;
}
#circularG_2{
left:3px;
top:3px;
-moz-animation-delay:0.56s;
-webkit-animation-delay:0.56s;
-o-animation-delay:0.56s;
-ms-animation-delay:0.56s;
}
#circularG_3{
top:0;
left:10px;
-moz-animation-delay:0.7s;
-webkit-animation-delay:0.7s;
-o-animation-delay:0.7s;
-ms-animation-delay:0.7s;
}
#circularG_4{
right:3px;
top:3px;
-moz-animation-delay:0.84s;
-webkit-animation-delay:0.84s;
-o-animation-delay:0.84s;
-ms-animation-delay:0.84s;
}
#circularG_5{
right:0;
top:10px;
-moz-animation-delay:0.98s;
-webkit-animation-delay:0.98s;
-o-animation-delay:0.98s;
-ms-animation-delay:0.98s;
}
#circularG_6{
right:3px;
bottom:3px;
-moz-animation-delay:1.12s;
-webkit-animation-delay:1.12s;
-o-animation-delay:1.12s;
-ms-animation-delay:1.12s;
}
#circularG_7{
left:10px;
bottom:0;
-moz-animation-delay:1.26s;
-webkit-animation-delay:1.26s;
-o-animation-delay:1.26s;
-ms-animation-delay:1.26s;
}
#circularG_8{
left:3px;
bottom:3px;
-moz-animation-delay:1.4s;
-webkit-animation-delay:1.4s;
-o-animation-delay:1.4s;
-ms-animation-delay:1.4s;
}
@-moz-keyframes bounce_circularG{
0%{
-moz-transform:scale(1)}
100%{
-moz-transform:scale(.3)}
}
@-webkit-keyframes bounce_circularG{
0%{
-webkit-transform:scale(1)}
100%{
-webkit-transform:scale(.3)}
}
@-o-keyframes bounce_circularG{
0%{
-o-transform:scale(1)}
100%{
-o-transform:scale(.3)}
}
@-ms-keyframes bounce_circularG{
0%{
-ms-transform:scale(1)}
100%{
-ms-transform:scale(.3)}
}
</style>
</head>
<body>
<div class="loading"><div id="circularG">
<div id="circularG_1" class="circularG">
</div>
<div id="circularG_2" class="circularG">
</div>
<div id="circularG_3" class="circularG">
</div>
<div id="circularG_4" class="circularG">
</div>
<div id="circularG_5" class="circularG">
</div>
<div id="circularG_6" class="circularG">
</div>
<div id="circularG_7" class="circularG">
</div>
<div id="circularG_8" class="circularG">
</div>
</div>
<div class="loading1"><a>Loading, Please Wait...</a></div><div class="loading2"><br><a>(click to abort)</a></div></div>
</body>
</html>
Thanks
302
To fix this problem, the footer can be cleared to ensure it stays beneath both floated columns. Clear has four valid values as well. Both is most commonly used, which clears floats coming from either direction. Left and Right can be used to only clear the float from one direction respectively.
Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.
Answer: Use the CSS3 flexbox With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
You don't need the position:fixed, top and left on anything inside the loading box. I have also made some changes to the positioning and spacing. Hope you like it!
http://jsfiddle.net/myajouri/9eZNQ/
HTML
<div class="loading">
<div id="circularG">
<div id="circularG_1" class="circularG"></div>
<div id="circularG_2" class="circularG"></div>
<div id="circularG_3" class="circularG"></div>
<div id="circularG_4" class="circularG"></div>
<div id="circularG_5" class="circularG"></div>
<div id="circularG_6" class="circularG"></div>
<div id="circularG_7" class="circularG"></div>
<div id="circularG_8" class="circularG"></div>
</div>
<div class="loadingText">
Loading, Please Wait...
<a href="#">(click to abort)</a>
</div>
</div>
CSS
.loadingText {
color: white;
font-family: sans-serif;
font-size: 16px;
}
.loadingText a {
line-height: 32px;
color: inherit;
font-size: 14px;
text-decoration: none;
}
.loading {
z-index: 999;
position: fixed;
left: 50%;
top: 50%;
width: 170px;
height: 90px;
margin-left: -95px;
margin-top: -55px;
padding: 10px;
border: 1px solid white;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.75);
text-align: center;
}
#circularG {
position:relative;
width:25px;
height:25px;
margin: 5px auto 15px auto;
}
.circularG {
position:absolute;
background-color: white;
width:6px;
height:6px;
-moz-border-radius:4px;
-moz-animation-name:bounce_circularG;
-moz-animation-duration:1.12s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:4px;
-webkit-animation-name:bounce_circularG;
-webkit-animation-duration:1.12s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-o-border-radius:4px;
-o-animation-name:bounce_circularG;
-o-animation-duration:1.12s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-ms-border-radius:4px;
-ms-animation-name:bounce_circularG;
-ms-animation-duration:1.12s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
}
#circularG_1 {
left:0;
top:10px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-o-animation-delay:0.42s;
-ms-animation-delay:0.42s;
}
#circularG_2 {
left:3px;
top:3px;
-moz-animation-delay:0.56s;
-webkit-animation-delay:0.56s;
-o-animation-delay:0.56s;
-ms-animation-delay:0.56s;
}
#circularG_3 {
top:0;
left:10px;
-moz-animation-delay:0.7s;
-webkit-animation-delay:0.7s;
-o-animation-delay:0.7s;
-ms-animation-delay:0.7s;
}
#circularG_4 {
right:3px;
top:3px;
-moz-animation-delay:0.84s;
-webkit-animation-delay:0.84s;
-o-animation-delay:0.84s;
-ms-animation-delay:0.84s;
}
#circularG_5 {
right:0;
top:10px;
-moz-animation-delay:0.98s;
-webkit-animation-delay:0.98s;
-o-animation-delay:0.98s;
-ms-animation-delay:0.98s;
}
#circularG_6 {
right:3px;
bottom:3px;
-moz-animation-delay:1.12s;
-webkit-animation-delay:1.12s;
-o-animation-delay:1.12s;
-ms-animation-delay:1.12s;
}
#circularG_7 {
left:10px;
bottom:0;
-moz-animation-delay:1.26s;
-webkit-animation-delay:1.26s;
-o-animation-delay:1.26s;
-ms-animation-delay:1.26s;
}
#circularG_8 {
left:3px;
bottom:3px;
-moz-animation-delay:1.4s;
-webkit-animation-delay:1.4s;
-o-animation-delay:1.4s;
-ms-animation-delay:1.4s;
}
@-moz-keyframes bounce_circularG {
0% {
-moz-transform:scale(1)
}
100% {
-moz-transform:scale(.3)
}
}
@-webkit-keyframes bounce_circularG {
0% {
-webkit-transform:scale(1)
}
100% {
-webkit-transform:scale(.3)
}
}
@-o-keyframes bounce_circularG {
0% {
-o-transform:scale(1)
}
100% {
-o-transform:scale(.3)
}
}
@-ms-keyframes bounce_circularG {
0% {
-ms-transform:scale(1)
}
100% {
-ms-transform:scale(.3)
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
