#time previewer

dabblet.css

/* #time previewer */
#time {
  width: 74px;
  height: 74px;
  margin-left: -37px;
  border-radius: 37px;
}
.previewer > svg {
  display: block;
  z-index: 1;
  position: relative;
}
#time > svg {
  margin: 5px;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: inherit;
  transform: rotate(-90deg);
}
#time circle {
  stroke: hsl(200, 10%, 20%);
  stroke-opacity: .9;
  fill: transparent;
  /* just shy of width to prevent clipping */
  stroke-width: 1;
}

.previewer {
    position: absolute;
    border-radius: 8px;
    box-shadow: 1px 1px 8px rgba(0,0,0,.7);
}

dabblet.html

<div id="time" class="previewer" style="left: 50px; top: 10px">
    <svg>
        <circle r="15.9" cy="32" cx="32" stroke-dasharray="100" transform="rotate(-90) translate(-64 0)">
            <animate repeatCount="1" dur="2s" values="-100;-300" attributeName="stroke-dashoffset" />
        </circle>
    </svg>
</div>

settings.json

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