Untitled

dabblet.css

#main-photo 
{
	width: 300px;
	height: 300px;
	border: 1px solid #f2f2f2;
}

.preloader
{
  height: 20px;
  width: 70px;
  margin: 45% auto;
  position:relative;
}

.preloader__box,
.preloader__box:before,
.preloader__box:after
{
  	background-color: rgb(242, 242, 242);
  	display: block;
  	height:20px;
  	width:20px;
  	position:absolute;
  	
  	animation-duration: 1.2s;
  	animation-iteration-count: infinite;
  	animation-timing-function: linear;
}

.preloader__box
{
	animation-name: loadera;
}

.preloader__box:before
{
  content: "";
  animation-name: loaderb;
  left: 25px;
}

.preloader__box:after
{
	content: "";
  	animation-name: loaderc;	
    left: 50px;
}

@keyframes loadera {
	0%{background-color: rgb(242, 242, 242);}
	25%{background-color: rgba(55, 171, 250, 1);}
	50%{background-color: rgb(242, 242, 242);}
	75%{background-color: rgb(242, 242, 242);}
	100%{background-color: rgb(242, 242, 242);}
}

@keyframes loaderb {
	0%{background-color: rgb(242, 242, 242);}
	25%{background-color: rgb(242, 242, 242);}
	50%{background-color: rgba(55, 171, 250, 1);}
	75%{background-color: rgb(242, 242, 242);}
	100%{background-color: rgb(242, 242, 242);}
}

@keyframes loaderc {
	0%{background-color: rgb(242, 242, 242);}
	25%{background-color: rgb(242, 242, 242);}
	50%{background-color: rgb(242, 242, 242);}
	75%{background-color: rgba(55, 171, 250, 1);}
	100%{background-color: rgb(242, 242, 242);}
}

dabblet.html

<div id="main-photo"> 
	<div class="preloader">
  		<div class="preloader__box"></div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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