Skip to content

Instantly share code, notes, and snippets.

@Smilesharks

Smilesharks/dabblet.css

Forked from anonymous/dabblet.css
Created January 10, 2014 15:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Smilesharks/8356461 to your computer and use it in GitHub Desktop.
Save Smilesharks/8356461 to your computer and use it in GitHub Desktop.
Download ZIP
Cargador Lukkin
Raw
dabblet.css
/**
* Cargador Lukkin
*/
html {background-color: GhostWhite;}
#anim {
width: 75px;
height: 75px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -45px;
margin-left: -45px;
border-radius: 5%;
overflow: hidden;
animation: bgcolor linear 8s infinite;
font-size:0; /* (FIX) убираем горизонтальные отступы */
line-height:0; /* (FIX) и вертикальные */
letter-spacing: -1px; /* (FIX) переубеждаем webkit'ы */
display: -moz-inline-stack!important;/* (FIX) */
}
@keyframes bgcolor {
0% {background: darkgray;}
}
#anim div {
width: 25px;
height: 25px;
display: inline-block;
animation-name: boxfirst;
animation-duration: .55s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.box1 {animation-delay: -.55s;}
.box2 {animation-delay: -.50s;}
.box3 {animation-delay: -.45s;}
.box4 {animation-delay: -.40s;}
.box8 {animation-delay: -.35s;}
.box12 {animation-delay: -.30s;}
.box16 {animation-delay: -.25s;}
.box15 {animation-delay: -.20s;}
.box14 {animation-delay: -.15s;}
.box13 {animation-delay: -.10s;}
.box9 {animation-delay: -.5s;}
.box5 {animation-delay: 0s;}
@keyframes boxfirst {
0% {background-color: rgba(0,0,0,.2)}
50% {background-color: rgba(255,255,255,.2)}
100% {background-color: rgba(0,0,0,.2)}
}
.box6 {animation-delay: 0s; opacity: .5;}
.box7 {animation-delay: .18s; opacity: .5;}
.box10 {animation-delay: .36s; opacity: .5;}
.box11 {animation-delay: .55s; opacity: .5;}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="anim">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
<div class="box13"></div>
<div class="box14"></div>
<div class="box15"></div>
<div class="box16"></div>
</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