Skip to content

Instantly share code, notes, and snippets.

@yoanmarchal

yoanmarchal/dabblet.css

Created August 1, 2014 14:29
Show Gist options
  • Save yoanmarchal/914b50439423fadd8487 to your computer and use it in GitHub Desktop.
Save yoanmarchal/914b50439423fadd8487 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%;
}
.loader{
height:100px;
width:100px;
background:#999;
overflow:hidden;
position:relative;
}
.loader::before{
content:'';
height:100px;
width:100px;
background:#444;
display:block;
animation:slideToRight 2s 1s infinite;
position: absolute;
left:0;
top:0;
z-index:1;
}
.loader::after{
content:'';
height:100px;
width:100px;
background:#555;
display:block;
animation:slideToBottom 1s 0s infinite;
position: absolute;
left:0;
top:0;
z-index:2;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slideToBottom {
0% {-webkit-transform: translate3d(0, 0, 0);}
50% {-webkit-transform: translate3d(0, 100%, 0);}
100% {-webkit-transform:translate3d(0,0,0)}
}
keyframes slideToBottom {
0%{transform: translate3d(0, 0, 0);}
50%{transform:translate3d(0,50%,0)}
100%{transform:translate3d(0,100%,0)}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slideToRight {
0% {-webkit-transform: translate3d(0, 0, 0);}
50% {-webkit-transform: translate3d(100%, 0, 0);}
100% {-webkit-transform:translate3d(0,0,0)}
}
keyframes slideToRight {
0%{transform: translate3d(0, 0, 0);}
50%{transform:translate3d(100%,0,0)}
100%{transform:translate3d(0,0,0)}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="loader">
</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