Edit in JSFiddle

<table>
	<tr>
		<th></th>
		<th>Predefined styles</th>
	</tr>
	<tr>
	<tr>
		<td>"success"</td>
		<td>
			<d-progress-bar class="d-progress-bar-success" message="d-progress-bar-success"></d-progress-bar>
			<d-progress-bar class="d-progress-bar-success" value=30 max=100></d-progress-bar>
		</td>
	</tr>
	<tr>
		<td>"info"</td>
		<td>
			<d-progress-bar class="d-progress-bar-info" message="d-progress-bar-info"></d-progress-bar>
			<d-progress-bar class="d-progress-bar-info" value=40 max=100></d-progress-bar>
		</td>
	</tr>
	<tr>
		<td>"warning"</td>
		<td>
			<d-progress-bar class="d-progress-bar-warning" message="d-progress-bar-warning"></d-progress-bar>
			<d-progress-bar class="d-progress-bar-warning" value=50 max=100></d-progress-bar>
		</td>
	</tr>
	<tr>
		<td>"danger"</td>
		<td>
			<d-progress-bar class="d-progress-bar-danger" message="d-progress-bar-danger"></d-progress-bar>
			<d-progress-bar class="d-progress-bar-danger" value=60 max=100></d-progress-bar>
		</td>
	</tr>
</table>

.d-progress-bar {
    width: 200px;
    display: block;
}

table td {
    text-align: right;
    vertical-align: top;
}

table th {
    text-align: left;
}

require.config({
    baseUrl: "http://ibm-js.github.io/libraries/master",     
});

require(["deliteful-build/layer"], function () {
    require([
        "deliteful/ProgressBar"
    ], function (){
        document.body.style.visibility = "visible";
    });
});