Untitled

dabblet.css

body {
background-color: #312525;
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
background-image: linear-gradient(335deg, #220000 23px, transparent 23px),
linear-gradient(155deg, #260000 23px, transparent 23px),
linear-gradient(335deg, #220000 23px, transparent 23px),
linear-gradient(155deg, #220000 23px, transparent 23px);
}
@keyframes bar1 {
	from { transform:rotate(00deg); color:#c0c0c0; }
	50% { transform: scale(1.4); }
	to { transform: cubic-bezier(150, 25, 140, 200); }
}

.bar1 {
	animation: 5.5s bar1 infinite;
	height:150px;
	width:150px;
	border-radius: 50%;
	margin:auto;
	background: #ff8949;
	background: -moz-linear-gradient(top,  #ff8949 10%, #2989d8 28%, #2989d8 50%, #2572ed 52%, #2989d8 76%, #2989d8 77%, #1e5799 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#ff8949), color-stop(28%,#2989d8), color-stop(50%,#2989d8), color-stop(52%,#2572ed), color-stop(76%,#2989d8), color-stop(77%,#2989d8), color-stop(100%,#1e5799));
	background: -webkit-linear-gradient(top,  #ff8949 10%,#2989d8 28%,#2989d8 50%,#2572ed 52%,#2989d8 76%,#2989d8 77%,#1e5799 100%);
	background: -o-linear-gradient(top,  #ff8949 10%,#2989d8 28%,#2989d8 50%,#2572ed 52%,#2989d8 76%,#2989d8 77%,#1e5799 100%);
	background: -ms-linear-gradient(top,  #ff8949 10%,#2989d8 28%,#2989d8 50%,#2572ed 52%,#2989d8 76%,#2989d8 77%,#1e5799 100%);
	background: linear-gradient(to bottom,  #ff8949 10%,#2989d8 28%,#2989d8 50%,#2572ed 52%,#2989d8 76%,#2989d8 77%,#1e5799 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8949', endColorstr='#1e5799',GradientType=0 );
}

dabblet.html

<div class="bar1"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"130","seethrough":"","prefixfree":"1","page":"css"}