Progress

dabblet.css

/* Progress */

.percent {
    background-color: #fff;
    clear: both;
    position: relative;
    border: 1px solid rgba(31, 84, 188, 0.30);
    text-align: right;
    background-image: 
    	linear-gradient(
    	top ,
    	 rgba(26, 98, 219, 0.3) 0%,
    	 rgba(54, 144, 240, 0.3) 50%,
    	 rgba(84, 163, 238, 0.3) 51%,
  	 rgba(112, 182, 242, 0.3) 100%
    	);


}

.percent_bar {
    background-color: #fff;
    height: 30px;
    width: 0;
    border: 1px solid rgba(31, 84, 188, 1);    background-image: 
    	linear-gradient(
    	top ,
    	 rgba(26, 98, 219, 1) 0%,
    	 rgba(54, 144, 240, 1) 50%,
    	 rgba(84, 163, 238, 1) 51%,
  	 rgba(112, 182, 242, 1) 100%
    	);
  margin: -1px 	
}

.percent_value {    
    height: 30px;
    line-height: 30px;

    color: #fff;
    font-weight: bold;
    
  
}

dabblet.html

<div class="percent">
<div class="percent_bar" style="width: 100%;">
<span class="percent_value">100%</span>
</div>
</div>
</br>
</br>
<div class="percent">

<div class="percent_bar" style="width: 40%;">
  <span class="percent_value">40%</span>
</div>
</div>
</br>
</br>



<div class="percent">
<div class="percent_bar" style="width: 0%;">
<span class="percent_value">0%</span>
</div>
</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}