Showing results for 
Search instead for 
Did you mean: 
Showing results for 
Search instead for 
Did you mean: 

How to create "Loading bar" widget?


How to create "Loading bar" widget?


In our case, we would like to create customize widget.

Is there any solution?

Many thanks,




There are descriptions, examples and API documents on how to create custom widgets in the Thingworx Help Center.

Latest version is found here...

Adding to Adam's response I would like to point a classic workflow that it's useful to follow when creating widgets:

1. First you need to identify an already existing JavaScript library that does the specific functionality for you. For example, if you want a Progress Bar, you search for "progress bar javascript library" on Google. One of the ones I found is: Progress.js - Themeable progress bar library

2. Wrap that library in your TW widget, using the documentation Adam provided.

Of course, it's quite obvious you can skip step 1, and write your own library, but what woould be the point if there are so many existing JS libraries out there?

Also take care about the licensing of those JS libraries (you need to check that license and act accordingly - not all JS libs are free for use)

I tried to wrap a library in my TW widget, but I can't use it. Maybe I don't understand how to use it in TW environment. In an HTML file it's simple.

I declared the .js and the .css files on runtime in metadata.xml. I tried firstly to call a function from the JS library in afterRender but it didn't work.

Could someone please provide a concrete example ?


Just i have also started to implements same custom widget "progress Bar".

Anyone can upload a step by step documents to implement it.

It will be helpful for me.


5-Regular Member

Anybody got any luck with this? I am also struggling with the same.

Actually for a progress bar, you can use Shape widget as it can be dynamically bound to it's fill Data value (EnableDynamicFill).