Skip to content

Instantly share code, notes, and snippets.

@yoanmarchal

yoanmarchal/dabblet.css

Created September 13, 2014 21:03
Show Gist options
  • Save yoanmarchal/ba65bfe55e17a4e61976 to your computer and use it in GitHub Desktop.
Save yoanmarchal/ba65bfe55e17a4e61976 to your computer and use it in GitHub Desktop.
Download ZIP
Styles go here
Raw
dabblet.css
/* Styles go here */
body{
padding:20px;
}
.loader, .loader:before, .loader:after{
background-color:transparent;
background-image: linear-gradient(transparent 50%, rgba(0,0,0,.2) 50%);
background-size:40px, 40px;
background-position: center center;
-webkit-animation: movebg 1s linear inifite, spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
height: 60px;
width:60px;
border-radius:100%;
box-shadow:0 0 0 2px #888 inset, 0 0 0 10px rgba(0,0,0,0.3) inset;
backface-visibility: hidden;
}
.loader{
position:relative;
display:block;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-o-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
.loader:before{
content:'';
display:block;
-webkit-transform:rotate(45deg) ;
-moz-transform:rotate(45deg) ;
-ms-transform:rotate(45deg) ;
-o-transform:rotate(45deg) ;
transform:rotate(45deg) ;
-webkit-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.loader:after{
position:absolute;
top:0;
content:'';
display:block;
-webkit-transform:rotate(90deg) ;
-moz-transform:rotate(90deg) ;
-ms-transform:rotate(90deg) ;
-o-transform:rotate(90deg) ;
transform:rotate(90deg) ;
}
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