Psychedelia

dabblet.css

/**
 * 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; }}

dabblet.html

<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>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}