diff --git a/images/ui/progress_bar/01 progress_bar.png b/images/ui/progress_bar/01 progress_bar.png new file mode 100644 index 00000000000..fe2e4d8a0e5 Binary files /dev/null and b/images/ui/progress_bar/01 progress_bar.png differ diff --git a/images/ui/progress_bar/01 progress_bar_dark.png b/images/ui/progress_bar/01 progress_bar_dark.png new file mode 100644 index 00000000000..b14443aa836 Binary files /dev/null and b/images/ui/progress_bar/01 progress_bar_dark.png differ diff --git a/images/ui/progress_bar/02 determinate.png b/images/ui/progress_bar/02 determinate.png new file mode 100644 index 00000000000..a47570f2f22 Binary files /dev/null and b/images/ui/progress_bar/02 determinate.png differ diff --git a/images/ui/progress_bar/02 determinate_and_ indeterminate.png b/images/ui/progress_bar/02 determinate_and_ indeterminate.png new file mode 100644 index 00000000000..52ea9df4fda Binary files /dev/null and b/images/ui/progress_bar/02 determinate_and_ indeterminate.png differ diff --git a/images/ui/progress_bar/02 determinate_and_ indeterminate_dark.png b/images/ui/progress_bar/02 determinate_and_ indeterminate_dark.png new file mode 100644 index 00000000000..234d5e812d6 Binary files /dev/null and b/images/ui/progress_bar/02 determinate_and_ indeterminate_dark.png differ diff --git a/images/ui/progress_bar/02 determinate_dark.png b/images/ui/progress_bar/02 determinate_dark.png new file mode 100644 index 00000000000..d43f328d87f Binary files /dev/null and b/images/ui/progress_bar/02 determinate_dark.png differ diff --git a/images/ui/progress_bar/03 indeterminate.png b/images/ui/progress_bar/03 indeterminate.png new file mode 100644 index 00000000000..cdb40c321fc Binary files /dev/null and b/images/ui/progress_bar/03 indeterminate.png differ diff --git a/images/ui/progress_bar/03 indeterminate_dark.png b/images/ui/progress_bar/03 indeterminate_dark.png new file mode 100644 index 00000000000..edec2cc9d73 Binary files /dev/null and b/images/ui/progress_bar/03 indeterminate_dark.png differ diff --git a/images/ui/progress_bar/04 determinate_to_indeterminate.png b/images/ui/progress_bar/04 determinate_to_indeterminate.png new file mode 100644 index 00000000000..4d989c2d093 Binary files /dev/null and b/images/ui/progress_bar/04 determinate_to_indeterminate.png differ diff --git a/images/ui/progress_bar/04 determinate_to_indeterminate_dark.png b/images/ui/progress_bar/04 determinate_to_indeterminate_dark.png new file mode 100644 index 00000000000..ddacaa1dccb Binary files /dev/null and b/images/ui/progress_bar/04 determinate_to_indeterminate_dark.png differ diff --git a/images/ui/progress_bar/06 process_name.png b/images/ui/progress_bar/06 process_name.png new file mode 100644 index 00000000000..f4fb8c3efaf Binary files /dev/null and b/images/ui/progress_bar/06 process_name.png differ diff --git a/images/ui/progress_bar/06 process_name_dark.png b/images/ui/progress_bar/06 process_name_dark.png new file mode 100644 index 00000000000..1ffbf8d4dc4 Binary files /dev/null and b/images/ui/progress_bar/06 process_name_dark.png differ diff --git a/images/ui/progress_bar/07 process_name_on_the_left.png b/images/ui/progress_bar/07 process_name_on_the_left.png new file mode 100644 index 00000000000..0e85996a865 Binary files /dev/null and b/images/ui/progress_bar/07 process_name_on_the_left.png differ diff --git a/images/ui/progress_bar/07 process_name_on_the_left_dark.png b/images/ui/progress_bar/07 process_name_on_the_left_dark.png new file mode 100644 index 00000000000..4f7385cfbbf Binary files /dev/null and b/images/ui/progress_bar/07 process_name_on_the_left_dark.png differ diff --git a/images/ui/progress_bar/08 header_for_several_processes.png b/images/ui/progress_bar/08 header_for_several_processes.png new file mode 100644 index 00000000000..3f846ba95ad Binary files /dev/null and b/images/ui/progress_bar/08 header_for_several_processes.png differ diff --git a/images/ui/progress_bar/08 header_for_several_processes_dark.png b/images/ui/progress_bar/08 header_for_several_processes_dark.png new file mode 100644 index 00000000000..7677f1d29ec Binary files /dev/null and b/images/ui/progress_bar/08 header_for_several_processes_dark.png differ diff --git a/images/ui/progress_bar/09 inline_processes.png b/images/ui/progress_bar/09 inline_processes.png new file mode 100644 index 00000000000..a67fd0827cf Binary files /dev/null and b/images/ui/progress_bar/09 inline_processes.png differ diff --git a/images/ui/progress_bar/09 inline_processes_dark.png b/images/ui/progress_bar/09 inline_processes_dark.png new file mode 100644 index 00000000000..d70ff09219b Binary files /dev/null and b/images/ui/progress_bar/09 inline_processes_dark.png differ diff --git a/images/ui/progress_bar/10 process_details.png b/images/ui/progress_bar/10 process_details.png new file mode 100644 index 00000000000..c275245f44c Binary files /dev/null and b/images/ui/progress_bar/10 process_details.png differ diff --git a/images/ui/progress_bar/10 process_details_dark.png b/images/ui/progress_bar/10 process_details_dark.png new file mode 100644 index 00000000000..e11c625dd15 Binary files /dev/null and b/images/ui/progress_bar/10 process_details_dark.png differ diff --git a/images/ui/progress_bar/11 process_details.png b/images/ui/progress_bar/11 process_details.png new file mode 100644 index 00000000000..03532fe4991 Binary files /dev/null and b/images/ui/progress_bar/11 process_details.png differ diff --git a/images/ui/progress_bar/11 process_details_dark.png b/images/ui/progress_bar/11 process_details_dark.png new file mode 100644 index 00000000000..08738e47e11 Binary files /dev/null and b/images/ui/progress_bar/11 process_details_dark.png differ diff --git a/images/ui/progress_bar/12 process_details.png b/images/ui/progress_bar/12 process_details.png new file mode 100644 index 00000000000..94c8fefe9a3 Binary files /dev/null and b/images/ui/progress_bar/12 process_details.png differ diff --git a/images/ui/progress_bar/12 process_details_dark.png b/images/ui/progress_bar/12 process_details_dark.png new file mode 100644 index 00000000000..75fe303b54f Binary files /dev/null and b/images/ui/progress_bar/12 process_details_dark.png differ diff --git a/images/ui/progress_bar/13 in_dialog.png b/images/ui/progress_bar/13 in_dialog.png new file mode 100644 index 00000000000..709ba8c121b Binary files /dev/null and b/images/ui/progress_bar/13 in_dialog.png differ diff --git a/images/ui/progress_bar/13 in_dialog_dark.png b/images/ui/progress_bar/13 in_dialog_dark.png new file mode 100644 index 00000000000..bbea3025712 Binary files /dev/null and b/images/ui/progress_bar/13 in_dialog_dark.png differ diff --git a/images/ui/progress_bar/14 in_status_bar.png b/images/ui/progress_bar/14 in_status_bar.png new file mode 100644 index 00000000000..be580df322a Binary files /dev/null and b/images/ui/progress_bar/14 in_status_bar.png differ diff --git a/images/ui/progress_bar/14 in_status_bar_dark.png b/images/ui/progress_bar/14 in_status_bar_dark.png new file mode 100644 index 00000000000..160c5ed2d2a Binary files /dev/null and b/images/ui/progress_bar/14 in_status_bar_dark.png differ diff --git a/images/ui/progress_bar/15 process_status.png b/images/ui/progress_bar/15 process_status.png new file mode 100644 index 00000000000..a6572539f9a Binary files /dev/null and b/images/ui/progress_bar/15 process_status.png differ diff --git a/images/ui/progress_bar/15 process_status_dark.png b/images/ui/progress_bar/15 process_status_dark.png new file mode 100644 index 00000000000..d723dbd2c84 Binary files /dev/null and b/images/ui/progress_bar/15 process_status_dark.png differ diff --git a/images/ui/progress_bar/16 process_control.png b/images/ui/progress_bar/16 process_control.png new file mode 100644 index 00000000000..77bc7f9132c Binary files /dev/null and b/images/ui/progress_bar/16 process_control.png differ diff --git a/images/ui/progress_bar/16 process_control_dark.png b/images/ui/progress_bar/16 process_control_dark.png new file mode 100644 index 00000000000..c26ae6a14fb Binary files /dev/null and b/images/ui/progress_bar/16 process_control_dark.png differ diff --git a/images/ui/progress_bar/17 pause_button.png b/images/ui/progress_bar/17 pause_button.png new file mode 100644 index 00000000000..986c3d016a3 Binary files /dev/null and b/images/ui/progress_bar/17 pause_button.png differ diff --git a/images/ui/progress_bar/17 pause_button_dark.png b/images/ui/progress_bar/17 pause_button_dark.png new file mode 100644 index 00000000000..a49742815d3 Binary files /dev/null and b/images/ui/progress_bar/17 pause_button_dark.png differ diff --git a/images/ui/progress_bar/17 stop_button.png b/images/ui/progress_bar/17 stop_button.png new file mode 100644 index 00000000000..29a1854ed28 Binary files /dev/null and b/images/ui/progress_bar/17 stop_button.png differ diff --git a/images/ui/progress_bar/17 stop_button_dark.png b/images/ui/progress_bar/17 stop_button_dark.png new file mode 100644 index 00000000000..7c3bed18646 Binary files /dev/null and b/images/ui/progress_bar/17 stop_button_dark.png differ diff --git a/images/ui/progress_bar/18 pause_button.png b/images/ui/progress_bar/18 pause_button.png new file mode 100644 index 00000000000..52fe7e7728a Binary files /dev/null and b/images/ui/progress_bar/18 pause_button.png differ diff --git a/images/ui/progress_bar/18 pause_button_dark.png b/images/ui/progress_bar/18 pause_button_dark.png new file mode 100644 index 00000000000..c2fc3f9f474 Binary files /dev/null and b/images/ui/progress_bar/18 pause_button_dark.png differ diff --git a/images/ui/progress_bar/19 resume_button.png b/images/ui/progress_bar/19 resume_button.png new file mode 100644 index 00000000000..76289a6e279 Binary files /dev/null and b/images/ui/progress_bar/19 resume_button.png differ diff --git a/images/ui/progress_bar/19 resume_button_dark.png b/images/ui/progress_bar/19 resume_button_dark.png new file mode 100644 index 00000000000..200c399d6df Binary files /dev/null and b/images/ui/progress_bar/19 resume_button_dark.png differ diff --git a/images/ui/progress_bar/20 resume_button.png b/images/ui/progress_bar/20 resume_button.png new file mode 100644 index 00000000000..94319f79b01 Binary files /dev/null and b/images/ui/progress_bar/20 resume_button.png differ diff --git a/images/ui/progress_bar/20 resume_button_dark.png b/images/ui/progress_bar/20 resume_button_dark.png new file mode 100644 index 00000000000..086f4984bfb Binary files /dev/null and b/images/ui/progress_bar/20 resume_button_dark.png differ diff --git a/images/ui/progress_bar/21 size_and_placement.png b/images/ui/progress_bar/21 size_and_placement.png new file mode 100644 index 00000000000..5d156daad99 Binary files /dev/null and b/images/ui/progress_bar/21 size_and_placement.png differ diff --git a/images/ui/progress_bar/21 size_and_placement_dark.png b/images/ui/progress_bar/21 size_and_placement_dark.png new file mode 100644 index 00000000000..e406685bf67 Binary files /dev/null and b/images/ui/progress_bar/21 size_and_placement_dark.png differ diff --git a/images/ui/progress_bar/22 size_and_placement.png b/images/ui/progress_bar/22 size_and_placement.png new file mode 100644 index 00000000000..5527037b713 Binary files /dev/null and b/images/ui/progress_bar/22 size_and_placement.png differ diff --git a/images/ui/progress_bar/22 size_and_placement_dark.png b/images/ui/progress_bar/22 size_and_placement_dark.png new file mode 100644 index 00000000000..14c6d2ee248 Binary files /dev/null and b/images/ui/progress_bar/22 size_and_placement_dark.png differ diff --git a/images/ui/progress_bar/comment.png b/images/ui/progress_bar/old/comment.png similarity index 100% rename from images/ui/progress_bar/comment.png rename to images/ui/progress_bar/old/comment.png diff --git a/images/ui/progress_bar/comment_long.png b/images/ui/progress_bar/old/comment_long.png similarity index 100% rename from images/ui/progress_bar/comment_long.png rename to images/ui/progress_bar/old/comment_long.png diff --git a/images/ui/progress_bar/determinate_example.png b/images/ui/progress_bar/old/determinate_example.png similarity index 100% rename from images/ui/progress_bar/determinate_example.png rename to images/ui/progress_bar/old/determinate_example.png diff --git a/images/ui/progress_bar/dialog.png b/images/ui/progress_bar/old/dialog.png similarity index 100% rename from images/ui/progress_bar/dialog.png rename to images/ui/progress_bar/old/dialog.png diff --git a/images/ui/progress_bar/horizontaly.png b/images/ui/progress_bar/old/horizontaly.png similarity index 100% rename from images/ui/progress_bar/horizontaly.png rename to images/ui/progress_bar/old/horizontaly.png diff --git a/images/ui/progress_bar/hover_stop_icon.png b/images/ui/progress_bar/old/hover_stop_icon.png similarity index 100% rename from images/ui/progress_bar/hover_stop_icon.png rename to images/ui/progress_bar/old/hover_stop_icon.png diff --git a/images/ui/progress_bar/indeterminate_example.png b/images/ui/progress_bar/old/indeterminate_example.png similarity index 100% rename from images/ui/progress_bar/indeterminate_example.png rename to images/ui/progress_bar/old/indeterminate_example.png diff --git a/images/ui/progress_bar/label_above.png b/images/ui/progress_bar/old/label_above.png similarity index 100% rename from images/ui/progress_bar/label_above.png rename to images/ui/progress_bar/old/label_above.png diff --git a/images/ui/progress_bar/pause.png b/images/ui/progress_bar/old/pause.png similarity index 100% rename from images/ui/progress_bar/pause.png rename to images/ui/progress_bar/old/pause.png diff --git a/images/ui/progress_bar/old/progress_bar_colors.png b/images/ui/progress_bar/old/progress_bar_colors.png new file mode 100644 index 00000000000..009217ecdea Binary files /dev/null and b/images/ui/progress_bar/old/progress_bar_colors.png differ diff --git a/images/ui/progress_bar/progress_bar_determinate.png b/images/ui/progress_bar/old/progress_bar_determinate.png similarity index 100% rename from images/ui/progress_bar/progress_bar_determinate.png rename to images/ui/progress_bar/old/progress_bar_determinate.png diff --git a/images/ui/progress_bar/old/progress_bar_indeterminate.png b/images/ui/progress_bar/old/progress_bar_indeterminate.png new file mode 100644 index 00000000000..a620464b2e8 Binary files /dev/null and b/images/ui/progress_bar/old/progress_bar_indeterminate.png differ diff --git a/images/ui/progress_bar/progress_bar_label_left.png b/images/ui/progress_bar/old/progress_bar_label_left.png similarity index 100% rename from images/ui/progress_bar/progress_bar_label_left.png rename to images/ui/progress_bar/old/progress_bar_label_left.png diff --git a/images/ui/progress_bar/progress_bar_sizes.png b/images/ui/progress_bar/old/progress_bar_sizes.png similarity index 100% rename from images/ui/progress_bar/progress_bar_sizes.png rename to images/ui/progress_bar/old/progress_bar_sizes.png diff --git a/images/ui/progress_bar/progress_bar_tool_window.png b/images/ui/progress_bar/old/progress_bar_tool_window.png similarity index 100% rename from images/ui/progress_bar/progress_bar_tool_window.png rename to images/ui/progress_bar/old/progress_bar_tool_window.png diff --git a/images/ui/progress_bar/progress_color.png b/images/ui/progress_bar/old/progress_color.png similarity index 100% rename from images/ui/progress_bar/progress_color.png rename to images/ui/progress_bar/old/progress_color.png diff --git a/images/ui/progress_bar/resume.png b/images/ui/progress_bar/old/resume.png similarity index 100% rename from images/ui/progress_bar/resume.png rename to images/ui/progress_bar/old/resume.png diff --git a/images/ui/progress_bar/several_progresses.png b/images/ui/progress_bar/old/several_progresses.png similarity index 100% rename from images/ui/progress_bar/several_progresses.png rename to images/ui/progress_bar/old/several_progresses.png diff --git a/images/ui/progress_bar/old/status_bar.png b/images/ui/progress_bar/old/status_bar.png new file mode 100644 index 00000000000..53c553517f0 Binary files /dev/null and b/images/ui/progress_bar/old/status_bar.png differ diff --git a/images/ui/progress_bar/tasks_dialog.png b/images/ui/progress_bar/old/tasks_dialog.png similarity index 100% rename from images/ui/progress_bar/tasks_dialog.png rename to images/ui/progress_bar/old/tasks_dialog.png diff --git a/images/ui/progress_bar/progress_bar_colors.png b/images/ui/progress_bar/progress_bar_colors.png deleted file mode 100644 index dceff46e620..00000000000 Binary files a/images/ui/progress_bar/progress_bar_colors.png and /dev/null differ diff --git a/images/ui/progress_bar/progress_bar_indeterminate.png b/images/ui/progress_bar/progress_bar_indeterminate.png deleted file mode 100644 index e8f98f59cc9..00000000000 Binary files a/images/ui/progress_bar/progress_bar_indeterminate.png and /dev/null differ diff --git a/images/ui/progress_bar/status_bar.png b/images/ui/progress_bar/status_bar.png deleted file mode 100644 index 5f84d6e26b2..00000000000 Binary files a/images/ui/progress_bar/status_bar.png and /dev/null differ diff --git a/images/ui/radiobutton/10_How_to_use.png b/images/ui/radiobutton/10_How_to_use.png new file mode 100644 index 00000000000..1f9f0e0cd8c Binary files /dev/null and b/images/ui/radiobutton/10_How_to_use.png differ diff --git a/images/ui/radiobutton/10_How_to_use_dark.png b/images/ui/radiobutton/10_How_to_use_dark.png new file mode 100644 index 00000000000..85911666486 Binary files /dev/null and b/images/ui/radiobutton/10_How_to_use_dark.png differ diff --git a/topics/ui/controls/progress_bar.md b/topics/ui/controls/progress_bar.md index aec207351b1..a49a2bb03a1 100644 --- a/topics/ui/controls/progress_bar.md +++ b/topics/ui/controls/progress_bar.md @@ -12,7 +12,7 @@ A progress bar informs users about the progress of a lengthy operation. -![](determinate_example.png){width=308} +![](01 progress_bar.png){width=706} ## When to use @@ -21,112 +21,173 @@ Follow the rules for [progress indicators](progress_indicators.md). ## How to use ### Types +Use determinate progress bar, if the process duration is known. Otherwise, use **indeterminate** progress bar: -Use **determinate** progress bar, if the process duration is known: - -![](determinate_example.png){width=308} - -Otherwise, use **indeterminate** progress bar: - -![](indeterminate_example.png){width=308} +![](02 determinate_and_ indeterminate.png){width=706} If an indeterminate process reaches a point where its duration can be determined, switch to a determinate progress bar. For example: -![](progress_bar_indeterminate.png){width=308} - -![](progress_bar_determinate.png){width=308} +![](04 determinate_to_indeterminate.png){width=706} ### Process name and details A progress bar can have a process name and process details. For wording, follow the rules for [progress text](progress_text.md). #### Process name - -Place a process name above the progress bar: - -![](label_above.png){width=308} - -If the vertical space is limited, place the process name with a colon on the left: - -![](progress_bar_label_left.png){width=308} - -If there are several processes in a group, add a bold header. The header is a noun. - -![](several_progresses.png){width=308} - -Do **not** show a process name for inline processes: - -![](progress_bar_tool_window.png){width=605} + + + + + + + + + + + + + + + + + +
+ Process name above the bar + +

Place a process name above the progress bar.

+
+ Process name on the left + +

If the vertical space is limited, place the process name with a colon on the left.

+
+ Header for several processes + +

If there are several processes in a group, add a bold header. The header is a noun.

+
+ Inline process + +

Do not show a process name for inline processes.

+
#### Process details - -Place process details under the progress bar in one line: - -![](comment.png){width=308} - -The length of the comment is limited by the progress bar: - -![](comment_long.png){width=308} - -If space is limited, show percentage completed: - -![](horizontaly.png){width=342} + + + + + + + + + + + + + +
+ Process details under the bar + +

Place process details under the progress bar in one line.

+
+ Comment length limited by progress bar. + +

The length of the comment is limited by the progress bar.

+
+ Show percentage completed if space is limited + +

If space is limited, show percentage completed.

+
#### In dialog Use a process name as a dialog header, capitalize the title and remove ellipsis. Process details appear above the progress bar: -![](dialog.png){width=544} +![](13 in_dialog.png){width=706} #### In status bar -Place a process name under the progress bar in the Status bar: +Place a process name with an ellipsis before the progress bar: -![](status_bar.png){width=238} +![](14 in_status_bar.png){width=706} ### Process status If a process consists of substeps that can fail but do not terminate the process, then use green and red colors to show the intermediate status. For example, show the status of the running tests: -![](progress_color.png){width=390} +![](15 process_status.png){width=706} Do **not** color progress bar to show the final result of the task, use [notifications](notification_types.md). In case of success, show notification for the user-initiated tasks, in case of failure — for all tasks. ### Process control +#### Cancel or Stop button Provide the Cancel button in the progress dialog if the process can be interrupted (see [Loading Project dialog](#in-dialog)). Use the Stop button if interrupting does not return the environment to its previous state. -Use the Stop icon if there are several processes running at the same time in one dialog or there is not enough space for the button (e.g., [Status bar](#in-status-bar)): - -![](tasks_dialog.png){width=700} - -Always place the Stop icon on the right next to the progress bar. On hover over the Stop icon, show the "Stop" or "Cancel" comment under the progress bar instead of process details: - -![](hover_stop_icon.png){width=332} - -If the process takes a long time and can prevent the user from performing tasks, provide an option to pause a process using the Pause button or the Pause icon. -Replace process details with the "Pause" comment on hover over the Pause icon: - -![](pause.png){width=331} +#### Stop icon +Use the Stop icon when multiple processes are running simultaneously in one dialog or when there isn’t enough space to display individual buttons (e.g., [Status bar](#in-status-bar)): + +![](16 process_control.png){width=706} + +#### Placement and Behavior + + + + + + + + + + + + + + + + + + + + + +
+ Stop icon on the progress bar + +

Always place the Stop icon on the right next to the progress bar. On hover over the Stop icon, show the "Stop" or "Cancel" comment under the progress bar instead of process details.

+
+ Pause button on the progress bar + +

If the process takes a long time and can prevent the user from performing tasks, provide an option to pause a process using the Pause button or the Pause icon.

+
+ Pause under the progress bar with hover effect + +

Replace process details with the "Pause" comment on hover over the Pause icon.

+
+ Resume button on the progress bar + +

If a user pauses the process, show "Paused" under the progress bar. Replace the Pause icon with Resume.

+
+ Resume under the progress bar with hover effect. + +

Show "Resume" under the progress bar and when hovered over the Resume button.

+
+ +#### Pause Option Recommendations It is **not** recommended providing an option to pause the process. It is preferable that the process runs in the background and does not interfere with a user. -If a user pauses the process, show "Paused" under the progress bar. -Replace the Pause icon with Resume, show "Resume" under the progress bar and when hovered over the Resume button: - -![](resume.png){width=330} - +#### Process Completion Hide the progress bar as soon as the process completes. ## Sizes and placement The progress form and sizes are the same in all themes. -![](progress_bar_sizes.png){width=586} +![](21 size_and_placement.png){width=706} +![](22 size_and_placement.png){width=706}