How to control Ipyvuetify ProgressCircular

Question

I want to use an ipyvuetify widget called ProgressCircular to show the loading process. Therefore, I was trying to figure out how to show and hide the widget in my code.

progress=v.ProgressCircular(width=3,
              color='red',
              indeterminate=True,
                       )

Although I was able to see all the attributes with dir(), I still couldn't find the right one to use. How do people figure out how to use classes or functions in a package that lacks samples.

dir(v.ProgressCircular)

The `ipyvuetify` package runs off the same principles as the `ipywidgets` package I believe, which has extensive documentation: https://ipywidgets.readthedocs.io/en/latest/index.html — ac24, Nov 23 '20 at 09:58

score 1 · Answer 1 · answered Nov 23 '20 at 09:37

You can use display(progress) within an ipywidgets Output widget.

import ipyvuetify as v
import ipywidgets as ipyw
import time

progress=v.ProgressCircular(width=3,
              color='red',
              indeterminate=True,
                       )

output = ipyw.Output()
display(output)

with output:
    display(progress)
    time.sleep(2)
output.clear_output()

score 1 · Answer 2 · answered Feb 04 '21 at 16:46

I will assume that you are working in a Jupyter environment :

after declaring your widget place it on the last line of your cell or use display as suggested by @ac24:

progress = v.ProgressCircular(
    width = 3,
    color = 'red',
    indeterminate = True
)
progress
# alternatively 
# display(progress)

once it's done you can play with it using some very basic html attributes

progress.class_ = 'd-none' # disapear
progress.class_ = None # shown

As you were complaining about the documentation, see here for the usage of HTML attributes https://ipyvuetify.readthedocs.io/en/latest/usage.html#setting-attributes, more examples would be useless as the possible combinations of html attributes are virtually infinite. Lucky for us vuetify.js is providing a very complete one that can be used in combination with the ipyvuetify one : https://vuetifyjs.com/en/styles/display/

score 1 · Answer 3 · answered Feb 09 '21 at 17:17

No need to use Output or styles for this, just make a container widget and change its children:

import ipyvuetify as v
import time

progress=v.ProgressCircular(width=3,
              color='red',
              indeterminate=True,)

container = v.Html(tag='div', children=[progress])
display(container)

time.sleep(2)
container.children=[v.Chip(children=['Done'])]

How to control Ipyvuetify ProgressCircular

3 Answers3