Construction site

dabblet.css

/**
 * Construction site
 */

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}

ul.likes-progress {
  border-left: 1px solid;
  float:right;
}

ul.dislikes-progress {
  border-right: 1px solid;
  clear: both;
  color: #888;
  
}
ul.likes-progress, ul.dislikes-progress {
  width:50%;
  padding: 0;
  -moz-box-sizing: padding-box;
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
}

.likes-progress li, .dislikes-progress li {
  list-style: none;
  padding: 6px;
  font-size: 125%;
  background-size: 40px 40px;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 75%, transparent 75%, transparent);

  margin: 5px 0;
}

.likes-progress li {
	width: attr('data-width');
	border-radius: 0 20px 20px 0;
	border: 1px solid #aaffa4;
  background-color: #c4ffc2;
}

.dislikes-progress li {
  background-color: #DDD;
	width: attr('data-width');
	border-radius: 20px 0 0 20px;
	border: 1px solid #EEE
}

dabblet.html

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
<script>
$(document).ready(function(){
  $('li', '.likes-progress, .dislikes-progress').each(function() {
  	var $this = $(this);
  	$this.width($this.data('width'));
  });
});
</script>
  <div>
  <ul class="likes-progress">
    <li data-width="90%">Ruby</li>
    <li data-width="80%">Team Fortress 2</li>
    <li></li>
    <li></li>
  </ul>
  </div>
  <ul class="dislikes-progress">
    <li>On-call</li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

dabblet.js

/*var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= "//code.jquery.com/jquery-1.10.2.min.js";
head.appendChild(script);
*/
$(document).ready(function(){
  $('li', '.likes-progress, .dislikes-progress').each(function() {
  	var $this = $(this);
  	$this.width($this.data('width'));
  });
});

settings.json

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}