Untitled

dabblet.css

body{background:red}

.container{
			position: absolute;
			left:50%;
			top:50%;
		}
		.circle{
			width:15px;
			height:15px;
			background: #fff;
			border-radius: 50%;
			position:absolute;	
			animation: ani 2s linear infinite;	
			}
			
			.circle:nth-child(2){
			animation-delay: -0.3s;
			}
			
			.circle:nth-child(3){
			animation-delay:-0.6s;
			}
			
		@keyframes ani{
		0%{transform-origin: 400% 50%; transform:rotate(0);}
		50%{transform-origin:400% 50%; transform: rotate(360deg);}
	    50.1%{transform-origin:-300% 50%; transform:rotate(0deg);}
	    100%{transform-origin:-300% 50%; transform:rotate(-360deg);}
		}
		}

dabblet.html

<div class="container">
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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