Why does the span not appear? - html

Question

This is a css
#loading {
margin: 80px auto;
position: relative;
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #ccc;
font: 12px "Lucida Grande", Sans-Serif;
text-align: center;
line-height: 100px;
color: white;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#loading:before {
content: "";
position: absolute;
left: -20px;
top: -20px;
bottom: -20px;
right: -20px;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
background: #eee;
z-index: -2;
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
#loading span {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid rgba(255,255,255,0.7);
z-index: -1;
top: -28px;
left: 0px;
-webkit-animation: ticktock 5s linear infinite;
-moz-animation: ticktock 5s linear infinite;
animation:ticktock 5s linear infinite;
-webkit-transform-origin: 50px 80px;
-moz-transform-origin: 50px 80px;
transform-origin:50px 80px;
}
#loading strong {
overflow: hidden;
display: block;
margin: 0 auto;
-webkit-animation: expand 2.5s linear infinite;
-moz-animation: expand 2.5s linear infinite;
animation:expand 2.5s linear infinite;
}
#-webkit-keyframes expand {
0% {
width: 0;
}
100% {
width: 60px;
}
}
#-webkit-keyframes ticktock {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-moz-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
#-moz-keyframes expand {
0% {
width: 0;
}
100% {
width: 60px;
}
}
#-moz-keyframes ticktock {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-moz-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
#keyframes ticktock {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-moz-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform:rotate(360deg);
-moz-transform: rotate(360deg);
}
}
#keyframes expand {
0% {
width: 0;
}
100% {
width: 60px;
}
}
this is the html
<div id="loading"><strong>loading...</strong><span></span></div>
The problem that this is the result
http://jsfiddle.net/jtrax/
It is working good and the circle is rotating
But when I add a completely separate css the circle is disappear, this is a jfiddle after adding the css which is not related to the circle
http://jsfiddle.net/HSJ3j/
Before adding the unrelated css:
After adding the unrelated css:
I forgot to tell you that the wrong is happening in the span in the html
Edit
when I change the z of loading span to 1 and the z of #loading:before to 0, I got this result

Answer 1

I restructured your loading div so it makes more sense and easier to understand
http://jsfiddle.net/jtrax/1/
<div id="loading">
<span></span>
<div class="inner"><strong>loading...</strong></div>
</div>
You can check the css in the fiddle. The spinning span might need more adjustment to centre it but you get the idea
UPDATED fiddle:
http://jsfiddle.net/HSJ3j/3/
If you look at the stacking order, the loading text should be the highest, then the grey smaller circle, then the spinning span and finally the outer bigger circle. Construct your div according to that and it makes things much easier

Answer 2

It's just an arrangement issue.
Your fieldset tag is over your animation. Try to arrange your fieldset to be styled with z-index:-1;.