Menu
I've been browsing for a watch as a present to someone and I came across an ajax loading I'm trying to replicate.
I got most of it working (via looking at the CSS) except, I cannot simulate the dark/transparency happening when the ajax animation is displayed. Any ideas how it could be done?
Also Any ideas on how can I make the clock "glow"? And the color inside it white?
This is the website: http://www.jomashop.com/tissot.html?gender=25&price_filter=23789. To make the animation appear, change the price.
here's the full code I'm working on:
<html>
<head>
<style>
#ajax-loader{
display: block;
border-radius: 60px;
border: 6px solid #414C5C;
height: 80px;
width: 80px;
position: fixed;
top: 30%;
left: 50%;
background-image:none!important;
background:#fff;
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #FFF;
box-shadow: 0px 0px 15px #FFF;
}
#ajax-loader::before{
content: "";
position: absolute;
background-color: #414C5C;
top:6px;
left: 48%;
height: 35px;
width: 6px;
border-radius: 5px;
-webkit-transform-origin: 50% 94%;
transform-origin: 50% 94%;
-webkit-animation: ptAiguille 12s linear infinite;
animation: ptAiguille 12s linear infinite;
}
#ajax-loader::after{
content: "";
position: absolute;
background-color: #414C5C;
top:2px;
left: 48%;
height: 38px;
width: 6px;
border-radius: 5px;
-webkit-transform-origin: 50% 97%;
transform-origin: 50% 97%;
-webkit-animation: grdAiguille 2s linear infinite;
animation: grdAiguille 2s linear infinite;
}
@-webkit-keyframes grdAiguille{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes ptAiguille{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
#page-overlay {
background: none repeat scroll 0 0 black;
position: fixed;
display: block;
opacity: 0.5;
z-index: 1000001; // or, higher
left: 0;
top: 0;
height: 100%;
width: 100%;
}
</style>
<body>
<p>testest sdfdsf sfs sdfsd sdfds f sdfsdf sfsdf s sdfsdfdsfsdf sdfsdfsd</p>
<div id="ajax-loader"></div>
<div id="page-overlay"></div>
</body>
</html>
Thanks very much
375
Create an overlay div at the end of your HTML and try adding the following CSS to your overlay div:
background: none repeat scroll 0 0 black;
position: fixed;
display: block;
opacity: 0.5;
z-index: 1000001; // or, higher
left: 0;
top: 0;
height: 100%;
width: 100%;
This would create a shaded transparent layer preventing you from clicking the back.
UPDATE: To apply the glow effect, add an image within your overlay div (with a class, lets say loading) and apply the following CSS to the image:
img.loading
{
box-shadow: 0px 0px 5px #fff;
}
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
