Untitled

dabblet.css

body {
  text-align: center;
  margin: 2em 0;
}

.loading-indicator,
.loading-indicator:before,
.loading-indicator:after {
  display: inline-block;
  min-width: 32px;
  text-align: center;
  font-size: 24px;
  height: 24px;
  line-height: 24px;
  -webkit-animation: cyclesecond .7s linear infinite;
}

.loading-indicator:before,
.loading-indicator:after {
  font-size: 12px;
  content: attr(data-symbol);
  -webkit-animation-name: cyclefirst;
}

.loading-indicator:after {
  -webkit-animation-name: cyclethird;
}

@-webkit-keyframes cyclefirst {
  0%, 66.64%, 83.30%, 100% {font-size: 12px}
  16.66%, 49.98% {font-size: 18px}
  33.32% {font-size: 24px}
}

@-webkit-keyframes cyclesecond {
  0%, 16.66%, 83.30%, 100% {font-size: 12px}
  33.32%, 66.64% {font-size: 18px}
  49.98% {font-size: 24px}
}

@-webkit-keyframes cyclethird {
  0%, 16.66%, 33.32%, 100% {font-size: 12px}
  49.98%, 83.30% {font-size: 18px}
  66.64% {font-size: 24px}
}

dabblet.html

<div class="loading-indicator" data-symbol="○">○</div>

dabblet.js

// alert('Hello world!');

settings.json

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