UltraKit · Widget #17
10 Bar Styles × 6 Track Shapes × 5 Label Positions × Scroll Trigger
10 Bar Style6 Track Shape5 Easing4 Label Position3 Columns2 More Choices2 Toggles
Section 01
10 options for bar style — all shown live below.
1
Style 1: Classic Flatbar_style = style-1
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
2
Style 2: Gradient Fillbar_style = style-2
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
3
Style 3: Striped Animatedbar_style = style-3
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
4
Style 4: Glow Neonbar_style = style-4
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
5
Style 5: Thin Elegantbar_style = style-5
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
6
Style 6: Step Segmentedbar_style = style-6
7
Style 7: Bubble Tipbar_style = style-7
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
8
Style 8: Half-Circle Arcbar_style = style-8
0% UI / UX Design
0% Web Development
0% Mobile Apps
0% Branding & Identity
9
Style 9: Full Circlebar_style = style-9
0% UI / UX Design
0% Web Development
0% Mobile Apps
0% Branding & Identity
10
Style 10: Glassmorphismbar_style = style-10
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
Section 02
6 options for track shape — all shown live below.
1
Square (sharp ends)track_shape = shape-square
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
2
Rounded (default)track_shape = shape-rounded
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
3
Pill (fully round)track_shape = shape-pill
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
4
Beveled (diagonal cut)track_shape = shape-beveled
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
5
Arrow chevrontrack_shape = shape-arrow
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
6
Wavy (CSS clip-path)track_shape = shape-wave
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
Section 03
5 options for easing — all shown live below.
1
Ease Out Materialanim_easing = cubic-bezier(0.4,0,0.2,1)
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
2
Ease Outanim_easing = ease-out
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
3
Ease In Outanim_easing = ease-in-out
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
4
Linearanim_easing = linear
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
5
Spring Overshootanim_easing = cubic-bezier(0.34,1.56,0.64,1)
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
Section 04
4 options for label position — all shown live below.
1
Above (title left, % right)label_position = above-space
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
2
Above (title left only)label_position = above-left
UI / UX Design
Web Development
Mobile Apps
Branding & Identity
3
Inside Barlabel_position = inside
UI / UX Design
92%
Web Development
85%
Mobile Apps
78%
Branding & Identity
70%
4
Below Barlabel_position = below
UI / UX Design
92%
Web Development
85%
Mobile Apps
78%
Branding & Identity
70%
Section 05
3 options for columns — all shown live below.
1
1columns = 1
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
2
2columns = 2
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
3
3columns = 3
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
Section 06
Extra switches for the finishing touches.
1
Trigger: On Scroll Into Viewanim_trigger = scroll
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
2
Trigger: On Page Loadanim_trigger = load
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%
Section 07
Switch parts of the widget on or off.
1
Show Percentage Value — Offshow_percentage = off
UI / UX Design
Web Development
Mobile Apps
Branding & Identity
2
Hide On Desktop — Onhide_desktop = hidden-desktop
UI / UX Design
0%
Web Development
0%
Mobile Apps
0%
Branding & Identity
0%