How to create a user control / user defined element using HTML5 and javascript which can be configure through its attribute

I have tried with widget(jquiry-ui) but works up to some extent. So I want a better solution.

I have develop widget containing a progress bar. Now my requirement is to add text on it which is dynamic and change according its progress.


Lets take a example,
    var _linearguage = this._progressbar = $('<progress></progress>');

To achieve it I have replace the above line of code with bellow,

    var _linearguage = this._progressbar = $(' <div id="progress" class="graph"><div id="bar" ><p>34%</p></div></div>');

and I am appending it to parent <DIV>

    widget._container.append(_linearguage);

Now I want change the width of bar(<div id="bar">) form widget option means dynamically.