Loading blobule

dabblet.css

.blob {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0px;
  height: 0px;
  margin-top: -30px;
  margin-left: -30px;
  background: green;
  border-width: 30px;
  border-style: solid;
  border-color: #3c4245;
  border-radius: 100%;
  animation-name: blob;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-fill-mode: none;
}

/*
  The inner blobule is needed so the thing looks right.
  With just one blob with a border, the inner radius of
  the corner gets too small.
*/
.blob2 {
  width: 30px;
  height: 30px;
  margin-top: -19px;
  margin-left: -19px;
  background: none;
  border-color: #fdfdfd;
  background: #fdfdfd;
  border-width: 4px;
  animation-name: blob;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-fill-mode: none;
}

@keyframes blob {
  0% {
    border-radius: 30% 100% 100% 100%;
  }
  25% {
    border-radius: 100% 30% 100% 100%;
  }
  50% {
    border-radius: 100% 100% 30% 100%;
  }
  75% {
    border-radius: 100% 100% 100% 30%;
  }
  100% {
    border-radius: 30% 100% 100% 100%;
  }
}

body {
  color: #3c4245;
  background: #fdfdfd;
}
h2 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 22px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  margin-left: -60px;
  margin-top: 40px;
  opacity: .2;
}

dabblet.html

<div class="blob"></div>
<div class="blob blob2"></div>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:700' rel='stylesheet' type='text/css'>
<h2>loading</h2>

dabblet.js

// alert('Hello world!');

settings.json

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