#time previewer

dabblet.css

/* #time previewer */
#time {
  width: 74px;
  height: 74px;
  margin-left: -37px;
  background: linear-gradient(right,
    hsla(24, 20%, 95%, .4),
    hsl(24, 20%, 95%) 95%);
  /* half the width/height for a perfect circle */
  border-radius: 37px;
}
#time:before {
  bottom: -4px;
}
#time:after {
  background: url(noise.png);
  z-index: 2;
}
.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: 31.8;
}

.previewer {
    position: absolute;
    border-radius: 8px;
    box-shadow: 1px 1px 8px rgba(0,0,0,.7);
}
/* tick */
.previewer:before {
    content: '';
    position: absolute;
    bottom: -6px; /* move half the width left to center */
    left: 50%; /* left edge at center */
    width: 12px;
    height: 12px;
    border: inherit;
    margin-left: -6px; /* drag left 6px (half the width) to center */
    background: white;
    transform: rotate(45deg); /* make a square a triangle */
    box-shadow: inherit;
}
/* content canvas of the previewer */
.previewer:after {
    content: '';
    position: absolute;
    /* make edges touch parent elements, match dimensions */
    top: 0; right: 0; bottom: 0; left: 0;
    border: 5px solid white;
    border-radius: inherit;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5) inset;
}

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="indefinite" dur="2s" values="-100;-300" attributeName="stroke-dashoffset" />
        </circle>
    </svg>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}