Skip to content

Instantly share code, notes, and snippets.

@icebeat
Created December 27, 2012 11:17
Show Gist options
  • Save icebeat/4387513 to your computer and use it in GitHub Desktop.
Save icebeat/4387513 to your computer and use it in GitHub Desktop.
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
.spinner {
background: #f5f5f5;
width: 50px;
height: 50px;
/* -webkit-transform-style: preserve-3d;
-webkit-perspective: 500px;*/
position:relative;
}
.top {
background-color: #00A256;
display: block;
position: absolute;
width: 50px;
height: 25px;
border-radius: 25px 25px 0 0;
-webkit-transform-origin: 0% 100%;
-webkit-transform: rotateX(0deg);
animation-duration: 1.5s;
animation-name: turn;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear
}
@keyframes turn {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-180deg);
}
}
<!-- content to be placed inside <body>…</body> -->
<div class="spinner">
<span class="top"></span>
<span class="bottom"></span>
<span class="left"></span>
<span class="right"></span>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment