Create Progress Bar in Liferay

Question

I am looking to create a progress bar in Liferay, hopefully inside the Dynamic List Display plugin but not necessarily. The data for the progress bar will be coming from the List though. Any suggestions?

Answer 1

You can do it easily with AlloyUI in Liferay 6.2. You need a placeholder for the progressbar - something like this:

<div id="myProgressBar" style="width:100%;height:20px;"></div>

And then you can create it with javascript like this:

<aui:script use="aui-base,aui-progressbar">
var progressBar = new A.ProgressBar({
        boundingBox: '#myProgressBar',
        label: '<%=percentage%>%',
        orientation: 'horizontal',
        value: '<%=percentage%>',
    }).render();
</aui:script>

You can read more about the progress bar config options here: http://alloyui.com/api/classes/A.ProgressBar.html

And some samples here: http://alloyui.com/versions/2.0.x/tutorials/progress-bar/