Skip to content

Instantly share code, notes, and snippets.

@ultim8k
Last active August 29, 2015 14:14
Show Gist options
  • Save ultim8k/d5b29bfa37365e82a13f to your computer and use it in GitHub Desktop.
Save ultim8k/d5b29bfa37365e82a13f to your computer and use it in GitHub Desktop.
Psychedelia
/**
* Psychedelia
*/
/*background: #f06;*/
/*background: linear-gradient(45deg, #f06, yellow);*/
/*min-height: 100%;*/
.ball {
width: 15px;
height: 15px;
margin: 0 auto 20px;
border-radius: 50%;
}
.ball--black { background-color: #515151; animation: showOn 3s 1; }
.ball--blue { background-color: #34a9f3; animation: showOn 6s 1; }
.ball--pink { background-color: #cd007b; animation: showOn 9s 1; }
.ball--green { background-color: #9aca52; animation: showOn 12s 1; }
.ball--yellow { background-color: #ffdf01; animation: showOn 15s 1; }
.loader { animation: showOff 20s 1; }
@keyframes showOn { 0%, 70% { opacity: 0; } 100% { opacity: 1; }}
@keyframes showOff { 0%, 70% { opacity: 1; } 100% { opacity: 0; }}
<div class="loader">
<div class="ball ball--black ball--first"></div>
<div class="ball ball--blue ball--second"></div>
<div class="ball ball--pink ball--third"></div>
<div class="ball ball--green ball--fourth"></div>
<div class="ball ball--yellow ball--fifth"></div>
</div>
// alert('Hello world!');
{"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