Progress Bar (Pro)


I apologize right away for the short description, since I'm not a writer. And I apologize for my English, as most of the text was translated by an online translator.


And so what is on the stack.
Four kinds of display:

  • Default - an almost simple look that can use a single color or gradient.
  • Stripe - stripes are added to the color or gradient, for which you can adjust the width and slope (angle).
  • Motion - the same stripes, only animation of movement is added.
  • Glossy - the level takes on a slightly convex appearance (a little volume).

You can choose a color or gradient for the level. And the color of the bar itself (background) is selected.

Three types of rounding: no rounding, with minimum rounding, and round corners.
The bar height can be adjusted.

Level percentage display and bar names can be enabled and have a color and font size setting. Font weight is adjustable.

When using several values (several levels) on one bar, you can use the Tooltip for their names. In the Tooltip, the font size, the color of the tooltip itself and the color of the text are adjusted. It is also possible to customize the color of the tooltip for each level.

You can use five levels on one bar. Each subsequent level is included in the stack settings. The main thing is that the total amount of all levels is 100 percent.

There is also an animation in the stack that shows the animated filling of the level. For animation, you can enable delay and offset.

All the features of the stack can be viewed in the examples.


Note: For those who bought earlier Few Tools and Progress Bar stacks, you should receive an email with a link to the purchase with a discount.


-      -      -      -

Version 1.0.4


RapidWeaver 7/8
Stacks 3.5+


Released: 02.2021



0 Likes
Stacks Image 1002

Examples:

Stacks Image 1014

This is just a screenshot, you can see the full stack operation by following the link below:


Additional examples with using images to fill the level and adding a badge for the level:

Badge with SVG file:

45%
45%

With background image, with badge with PNG file and animation:

60%

With badge with gradient and FA icon:

50%

The process of adding multiple levels:

25%

Image
1
25%10%

Image
2
25%10%20%

Image
3
25%10%20%20%

Image
4
25%10%20%20%10%

Image
5
Title text
25%10%20%20%10%

Image
6
Title text
25%10%20%20%10%
Text 1
Text 2
Text 3
Text 4
Text 5

Settings
Stacks Image 537
Stacks Image 1012
© 2021 Wondrousss |