Skip to content

Instantly share code, notes, and snippets.

@yoanmarchal

yoanmarchal/dabblet.css

Created August 1, 2014 14:29
Show Gist options
  • Save yoanmarchal/256e40409ca9f4c07b0f to your computer and use it in GitHub Desktop.
Save yoanmarchal/256e40409ca9f4c07b0f to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body{
background: #f06;
background: linear-gradient(45deg, #333, #222);
min-height: 100%;
margin:100px;
}
.loader{
height:100px;
width:100px;
background:#999;
overflow:hidden;
position:relative;
animation:rotate 2s infinite 0s;
}
.loader::before{
content:'';
height:100px;
width:100px;
background:rgba(68,68,68,0.5);
display:block;
animation:slideToBottom 2s infinite 0s;
position: absolute;
left:0;
top:0;
z-index:1;
}
.loader::after{
content:'';
height:100px;
width:100px;
background:rgba(78,78,78,0.5);
display:block;
animation:slideToRight 2s infinite 2s;
position: absolute;
left:0;
top:0;
z-index:2;
}
.loader span{
height:100%;
width:100%;
display:block;
}
.loader span::before{
content:'';
height:100px;
width:100px;
background:rgba(88,88,88,0.5);
display:block;
animation:slideToTop 2s infinite 4s;
position: absolute;
left:0;
top:0;
z-index:3;
}
.loader span::after{
content:'';
height:100px;
width:100px;
background:rgba(98,98,98,0.5);
display:block;
animation:slideToLeft 2s infinite 6s;
position: absolute;
left:0;
top:0;
z-index:5;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slideToBottom {
0% {-webkit-transform: translate3d(0, -100px, 0);}
50% {-webkit-transform: translate3d(0, 0, 0);}
}
keyframes slideToBottom {
0%{transform: translate3d(0, -100px, 0);}
50%{transform:translate3d(0,0,0)}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slideToRight {
0% {-webkit-transform: translate3d(-100px, 0, 0);}
50% {-webkit-transform: translate3d(0, 0, 0);}
}
keyframes slideToRight {
0%{transform: translate3d(-100px, 0, 0);}
50%{transform:translate3d(0,0,0)}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slideToTop {
0% {-webkit-transform: translate3d(0, 100px, 0);}
50% {-webkit-transform: translate3d(0, 0, 0);}
}
keyframes slideToTop {
0%{transform: translate3d(0, 100px, 0);}
50%{transform:translate3d(0,0,0)}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slideToLeft {
0% {-webkit-transform: translate3d(100px, 0, 0);}
50% {-webkit-transform: translate3d(0, 0, 0);}
}
keyframes slideToLeft {
0%{transform: translate3d(100px, 0, 0);}
50%{transform:translate3d(0,0,0)}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(360deg);}
}
keyframes rotate {
0%{transform: rotate(0deg)}
50%{transform:rotate(360deg)}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="loader">
<span></span>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment