Skip to content

Instantly share code, notes, and snippets.

@trivoallan

trivoallan/gist:500238

Created July 30, 2010 09:36
Show Gist options
  • Save trivoallan/500238 to your computer and use it in GitHub Desktop.
Save trivoallan/500238 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<html>
<head>
<style>
#example1 .gradient {
background-image:-moz-linear-gradient(center bottom , rgba(0, 0, 0, 0.3) 49%, rgba(0, 0, 0, 0.25) 50%, transparent);
border:1px solid rgba(0, 0, 0, 0.5);
width: 250px;
height: 250px;
display: block;
}
#example1 .spinner {
background:url(spinner.gif) center center no-repeat;
opacity:.5;
width: 250px;
height: 250px;
}
#example2 .gradient {
background-image:url('header.png');
border:1px solid rgba(0, 0, 0, 0.5);
width: 250px;
height: 250px;
display: block;
}
#example2 .spinner {
background:url(spinner.gif) center center no-repeat;
opacity:.5;
width: 250px;
height: 250px;
}
#example2 .gradient .inline-spinner {
margin-left: 120px;
margin-top: 120px;
}
#example3.gradient {
background-image:url('header.png');
border:1px solid rgba(0, 0, 0, 0.5);
width: 250px;
height: 250px;
display: block;
opacity:.5;
}
#example3 .spinner {
background:url(spinner.gif) center center no-repeat;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<h2>Affichage d'un loader transparent sur un d&eacute;grad&eacute; CSS</h2>
<div id="example1">
<p class="spinner">
<span class="gradient">
</span>
</p>
</div>
<h2>affichage d'un loader inline transparent sur une image de fond</h2>
<div id="example2">
<p class="spinner">
<span class="gradient">
<img src="spinner.gif" class="inline-spinner" />
</span>
</p>
</div>
<h2>affichage d'un loader transparent sur une image de fond</h2>
<div id="example3" class="gradient">
<p class="spinner">
</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment