Have you ever cared about the progress bar in the installation package? Do you know how to configure a beautiful progress bar? If you encounter special requirements for the progress bar, do you know how to implement them?
In the beautification process of the installation package, there is a detail that is quite important, and that is the presentation style of the progress bar!
Whether it appears natural, beautiful enough, or has any highlights, these are often points pursued by customers.
In the nsNiuniuSkin+Nsis installation package beautification solution, we have multiple methods to configure the UI presentation of the progress bar to meet different scene requirements. Currently, our progress bar is relatively traditional, presenting progress from left to right. In the future, we will provide more styles to meet different customer needs.
Now let's take a look at some configuration methods:
This is the most standard duilib progress bar configuration. The plugin will first draw the background image, covering the entire Slider area, and then draw the foreground image. The foreground image will only be drawn to the progress position to distinguish the current progress. The configuration script is as follows:
<Slider name="slrProgress" padding="20,53,20,0" height="24" value="20" min="0" max="100" mouse="false" foreimage="file='images\progress_fore.png' corner='5,5,5,5'" bkimage="file='images\progress_bk.png' corner='5,5,5,5'" />
The effect is as follows:
Note that the progress bar can be designed with rounded corner images. In the XML script, use the corner property to fix both ends and stretch the middle. This way, you get a variable-length progress bar. Also, you can design gradient colors for the foreground and background images so that they appear more layered during stretching.
Completely control it through colors. In the Slider control, we can present progress not only through images but also through foreground and background colors. We have also implemented a gradient foreground color. The specific configuration is as follows:
<Slider name="slrProgress" padding="20,53,20,0" height="8" value="1" min="0" max="100" mouse="false" forecolor="0xFF44D7B6" forecolor2="0xFF2979FF" thumbsize="0,0" bkcolor="#FFE3E3E3" />
The effect is as follows:
In some scenarios, where you need to minimize the size of the installation package while maintaining an elegant progress bar, this configuration scheme will be more suitable.
Do the above two effects cover everything? In more than 90% of scenarios, they should be sufficient—simple and convenient. But if you still want to pursue a more perfect effect, try the following solution.
For example, how would you present a small rocket when the progress reaches a certain point to indicate that the installation is actively moving forward?
The configuration is as follows:
<Slider name="slrProgress" padding="20,53,20,0" height="24" value="20" min="0" max="100" mouse="false" thumbimage="file='images\rocket.png'" thumbsize="50,24" foreimage="file='images\progress_fore.png' corner='5,5,5,5'" bkimage="file='images\progress_bk.png' corner='5,5,5,5'" />
The effect is as follows:
This solution is based on Solution 1 but adds a thumb image to present the current progress. The effect is quite good!
Actually, you may not necessarily need to use a thumb image; you can directly use foreimage combined with the corner attribute. Here's a teaser: How would you design the foreground image and configure the foreimage? If you want to know, you can discuss and inquire in our community!
Suppose we want to create an installation package related to water, and we want a fish to swim in the progress of the installation. The fish should swim to where the progress is. How can we achieve this?
Obviously, the above three solutions cannot achieve this. In our nsNiuniuSkin plugin, we do not currently support such a progress bar. Does this mean we cannot achieve this effect? Not at all! The biggest feature of the nsNiuniuSkin and Nsis solution is flexibility. We provide all interfaces to Nsis, which can be combined with the script's capabilities to achieve this functionality. The configuration is as follows:
XML configuration:
<Slider name="slrProgress" padding="20,53,20,0" height="24" value="20" min="0" max="100" mouse="false" foreimage="file='images\progress_fore.png' corner='5,5,5,5'" bkimage="file='images\progress_bk.png' corner='5,5,5,5'" /> <GifAnim float="true" name="slrProgress_float" bkimage="file='images\walk.gif'" pos="20,276,47,320" visible="true"/>
NSIS script (Add the following script in the ExtractCallback function):
# Calculate gif position, calculate X coordinate, store in $R2-$R3
System::Int64Op $R6 * 500
Pop $R2
System::Int64Op $R2 / 100
Pop $R2 # left coordinate
System::Int64Op $R2 + 20
Pop $R2 # left coordinate
System::Int64Op $R2 + 27
Pop $R3 # right coordinate
nsNiuniuSkin::SetControlAttribute $hInstallDlg "slrProgress_float" "pos" "$R2,286,$R3,310"
The effect is as follows:
Doesn't it look more dynamic?
Here, you don't necessarily need foreground and background images. The use of foreground and background colors is also the same; you can combine them according to your needs!
If you have more progress bar configuration solutions or have more detailed and higher requirements for installation package progress, feel free to contact us!
During the installation package installation process, exquisite UIs often leave a more profound impression on customers, highlighting the service provider's focus and dedication to user experience! We hope our efforts make installation package creation a bit easier and more enjoyable!
May there be no difficult installation packages in the world!
For more information, please visit: http://www.ggniu.com/