App load with progress bar or icon

Webix JS
#1

hi, i want to do:

example:
we have a function count all from 1-> 10000, call that is “SumFunc”
when i click Sum button, its call “SumFunc” and all screen will load like example: https://snippet.webix.com/e171cad4

thank you!

#2

Hello @duynq2197,
You need to extend the component to include the ProgressBar mixin and call the showProgress method (type “bottom” or “top” to display a progress bar) before calling to calculate sum.
Please take a look at the snippet:
https://snippet.webix.com/hax7uhaz

#3

hi, if i put some code setTimeout in arr.reduce to make this function more longer, but the time sumFunc(200) delay i decrease, example:
https://snippet.webix.com/83atp5lb

it’s seem work not exactly. In real, i need use progress show when i call a ajax() then after ajax() response, use then() or catch() to turn off ProgressBar.

Thanks for reply soon

#4

@duynq2197,
Please, take a look at the snippet: http://webix.com/snippet/c9801684
In the real Ajax request you won’t need the webix.delay() wrapper, as it just emulates the time you will wait for the serverside response.
Please check the related documentation.

#5

hello, its seem like ProgressBar only work with datagrid, right?

What’s the solution if i want to display loading and disable all app screen. Not only datagrid ?

#6

Hello @duynq2197,

its seem like ProgressBar only work with datagrid, right?
Not really. You can expand any component (including all layout):

webix.extend($$("view_id"), webix.ProgressBar);

Take a look at the snippet:
https://snippet.webix.com/sfqtq5de

Please check documentation for getting information about Progress Bar: https://docs.webix.com/desktop__progress.html

#7

I love this way, webix is so cool