html video 设置进度条不可拖动_17 进度条Progress教程（plotly Dash Bootstrap版）

今天第17课，本节课程主要学习Dash Bootstrap Components中的进度条Progress。继续欣赏音乐《A Time For Us》。祝大家周末愉快~~~ (一)功能

使用“Progress”组件将Bootstrap样式的进度条添加到web应用中，该功能具有对堆积bar，动画背景和文本标签的支持。

(二)调用方式       

     dash-bootstrap-components.Progress

(三)Progress系列关键参数  

• bar(布尔值，可选)：应用进度条类，供在多进度条中使用。

• multi(布尔值，可选)：为多个进度条创建容器。

• max(字符串|数字，可选)：值的上限，默认值：100。

• value(字符串|数字，可选)：指定进度，值从0到最大(包含最大值)。

• animated(布尔值，可选)：动画条，必须将条带设置为True才能工作。

• striped(布尔值，可选)：使用带区卷进度条。

• color(字符串，可选)：设置进度条的颜色，选项：主要，次要，成功，警告，危险，信息。

(四)Progress使用层层深入      

1. 基本使用方法

import dash_bootstrap_components as dbcprogress = dbc.Progress(value=50)

 2.  为进度条Progress添加文本标签

要将文本标签添加到进度栏，只需将其添加为children即可。

import dash_bootstrap_components as dbcprogress = dbc.Progress("25%", value=25, children='25%')

3. 改变Progress的高度height dbc. Progress (value=50, style={"height": "30px"})

import dash_bootstrap_components as dbcimport dash_html_components as htmlprogress = html.Div(    [        dbc.Progress(value=50, style={"height": "1px"}, className="mb-3"),        dbc.Progress(value=50, style={"height": "30px"}),    ])

4. 更改进度条Progress颜色 color ： 设置progress不同的填充色 。

import dash_bootstrap_components as dbcimport dash_html_components as htmlprogress = html.Div(    [        dbc.Progress(value=25, color="success", className="mb-3"),        dbc.Progress(value=50, color="warning", className="mb-3"),        dbc.Progress(value=75, color="danger", className="mb-3"),        dbc.Progress(value=100, color="info"),    ])

5. 多段Progress、嵌套Progress 嵌套“progress”组件以制作带有多个进度条的进度条。在父级Progress组件上设置multi = True，在每个子级上设置bar = True 。

import dash_bootstrap_components as dbcprogress = dbc.Progress(    [        dbc.Progress(value=20, color="success", bar=True),        dbc.Progress(value=30, color="warning", bar=True),        dbc.Progress(value=20, color="danger", bar=True),    ],    multi=True,)

6. 条纹Progress及动态显示 设置关键参数 striped = True 即可实现进度条以条纹装显示。

import dash_bootstrap_components as dbcprogress = dbc.Progress(value=75, striped=True)

当设置条纹装进度条后，可通过设置animated=True实现进度条的动态显示。

import dash_bootstrap_components as dbcimport dash_html_components as htmlfrom dash.dependencies import Input, Output, Stateprogress = html.Div(    [        dbc.Progress(value=80, id="animated-progress", striped=True),        dbc.Button(            "Toggle animation", id="animation-toggle", className="mt-3"        ),    ])@app.callback(    Output("animated-progress", "animated"),    [Input("animation-toggle", "n_clicks")],    [State("animated-progress", "animated")],)def toggle_animation(n, animated):    if n:        return not animated    return animated

(五)Progress本课程完整代码      

该部分视频教程的具体代码可看文末完整程序部分。

"""## 进度条Progress使用“Progress”组件将Bootstrap样式的进度条添加到web应用中，该功能具有对堆积bar，动画背景和文本标签的支持。"""import dashimport dash_bootstrap_components as dbcimport dash_html_components as htmlimport dash_core_components as dccfrom dash.dependencies import Input, Output, Stateapp = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])page = dbc.Container([    html.Br(),    dbc.Row([        dbc.Col([            dcc.Interval(id='interval',n_intervals=0,interval=300),  # n_intervals计数器，interval表示间隔时间长短            dbc.Progress(id='progress1',value=50,max=100,children='50%',color='primary',style={'height':'30px'},striped=True,animated=True)        ],        ),    ]),    dbc.Row([        dbc.Col([            dbc.Progress(id='progress2', value=30, max=100, children='30%',color='danger', style={'height': '30px'})        ],        ),    ]),    dbc.Row([        dbc.Col([            dbc.Progress(id='progress3', value=50, max=100, children='50%',color='info', style={'height': '30px'})        ],        ),    ]),    dbc.Row([        dbc.Col([            dbc.Progress(id='progress4', value=70, max=100, children='70%', color='dark',style={'height': '30px'})        ],        ),    ]),    dbc.Row([        dbc.Col([            dbc.Progress([                dbc.Progress(value=10, children='10%', color='primary',bar=True),                dbc.Progress(value=30, children='30%', color='info',bar=True),                dbc.Progress(value=50, children='50%', color='danger',bar=True),                dbc.Progress(value=10, children='10%', color='dark',bar=True),            ],            multi=True)        ],        ),    ]),])app.layout = html.Div([page])@app.callback([Output('progress1','value'),Output('progress1','children')],              [Input('interval','n_intervals')])def Update_progress(n_intervals):    if n_intervals <= 100:        return n_intervals, f"{n_intervals} %"    else:        return 100, f"{100} %"if __name__ == "__main__":    app.run_server(debug=True, port=8030)

---

注：相关视频教程请参见网易云课堂：https://study.163.com/course/introduction/1209894808.htm?share=2&shareId=480000002204845

---

欢迎扫码关注微信公众号(心觅空间)及加入QQ群(995019531)讨论技术细节~