The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

.circle{
  height: 100px;
  width: 50px;
  position: relative;
  top: 0;
  left: 0;
  background: white;
}
.circle:hover:before, .circle:hover:after{
  transform: rotate(45deg);  
  opacity: 1;
}
.circle:before{    
  content: '';    
  height: 98px;
  width: 98px;
  position: absolute;    
  top: 0;    
  left: 0;
  z-index: -1;
  border: 1px red solid;
  border-color: red red  transparent transparent;
  border-radius: 50%;
  transform: rotate(-135deg);
  transition: transform 5s ease-in;
}
.circle:after{
  content: '';
  height: 98px;
  width: 98px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border: 1px red solid;
  border-color: transparent transparent red red;
  opacity: 0;
  border-radius: 50%;
  transform: rotate(-135deg);
  transition: transform 5s ease-out, opacity .1s 5s;
}

dabblet.html

<div class="circle">test</div>

dabblet.js

// alert('Hello world!');

settings.json

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