Untitled

dabblet.css

body {
  padding: 5em 10em;
}

.wating:after {
  content: '';
  display: inline-block;
  width: .5em;
  height: 2em;
  overflow: hidden;
  background: #666;
  border-radius: 20%;
  transform: rotate(45deg) translate3d(0, 0, 0);
  transform-origin: 3em 2em;
  box-shadow: 0 4em #eee;
}

.wating:before {
  content: '';
  display: inline-block;
  width: .5em;
  height: 2em;
  overflow: hidden;
  background: #eee;
  border-radius: 20%;
  transform: rotate(-45deg) translate3d(.1em, -.6em, 0);
  transform-origin: 1em 3em;
  box-shadow: 0 4em #aaa;
}

.wating {
  font-size: 9px;
}

.wating i,
.wating {
  position: relative;
  display: inline-block;
  width: .5em;
  height: 2em;
  background: #333;
  border-radius: 20%;
  box-shadow: 0 4em #ddd;
}

.wating i {
  position: absolute;
  left: 400%;
  top: 100%;
  background-color:#999;
  transform: rotate(90deg);
  box-shadow: 0 4em #efefef;
}

dabblet.html

<div class="wating"><i></i></div>

dabblet.js

// alert('Hello world!');

settings.json

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