Untitled

dabblet.css

body {
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
}

.line-graph {
    border: 0px dotted red;
}

.number {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.line-graph {
    position: relative;
    padding-top: 20px;
    width: 330px;
    height: 60px;
    font-size: 11px;
}

.remaining {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    color: #949BA4;
}

.percent-100 .remaining {
    color: green;
}

.graph {
	position: relative;
    border: 1px solid #CCC;
    border-radius: 10px;
    background-image: linear-gradient(to bottom, #DDD, #DEDEDE);
    box-shadow: inset 2px 3px 4px #666;
    width: 100%;
    height: 12px;
    z-index: 2;
}

.actual {
    position: relative;
    margin-top: 3px;
    font-weight: bold;
    color: #C0C6CD;
}

.actual .start {
    position: absolute;
    left: 0;
}

.actual .end {
    position: absolute;
    right: 0;
}

.value {
	 border-radius: 10px 0 0 10px;
     background-color: yellow;
     box-shadow: inset 1px 2px 3px #666;
     width: 32%;
     height: 12px;
     z-index: 1;
}

.graph .marker {
	position: absolute;
	left: 32%;
	top: 9px;
	margin-left: -4px;
	background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAACtJREFUGFdj+P//PwMS/t/Q0ADkIsRQJEEyIICsCKYAJgenYYpACnACkCIAOSdtmRvNiWwAAAAASUVORK5CYII=);
}

.graph .marker .text {
    margin-top: 5px;
    margin-left: -14px;
    background-color: #FFF;
    padding: 2px;
	font-weight: bold;
	font-size: 12px;
	color: #3C424A;
	text-align: center;
}

.complete .graph .marker {
    display: none;
}

.complete .value {
    border-radius: 10px;
    width: 100%;
}

dabblet.html

<div class="line-graph">
    <div class="remaining">
        Remaining:
        <span class="number">0</span>    
    </div>
    <div class="graph">
        <div class="value"></div>
        <div class="marker">
            <div class="text">
                Today
            </div>
        </div>
    </div>
    <div class="actual">
        <div class="start">1 Jul 2012</div>
        <div class="end">31 Jul 2012</div>
    </div>
</div>

<div class="line-graph complete">
    <div class="remaining green">
        Goal reached   
    </div>
    <div class="graph">
        <div class="value percent-32"></div>
        <div class="marker">
            <div class="text">
                Today
            </div>
        </div>
    </div>
    <div class="actual">
        <div class="start">1 Jul 2012</div>
        <div class="end">31 Jul 2012</div>
    </div>
</div>

settings.json

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