Progress Bubble
Plugin Description
Arqam Saleem
Last Update há 2 anos
he Progress Bubble plugin adds a unique twist to traditional progress bars by incorporating fluid, liquid-like animations that trigger on hover. Here’s what you can expect:
- Liquid Fill Effect: Watch the progress bar fill from the bottom to the top in a smooth, fluid animation when users hover over it.
- Color Customization: Choose your fill color and background color to match your app’s design seamlessly.
- Animation Control: Adjust the duration and easing to create the perfect hover animation.
- Interactive UI: Enhance user engagement by providing a visually appealing progress indicator on hover.
- Lightweight & Responsive: Works smoothly across devices with minimal impact on performance.
Usage Instructions
Install the Plugin
- In your Bubble editor, navigate to the Plugins tab.
- Search for “Progress Bubble” and click Install.
Add the Element
- Go to the Design tab of your Bubble editor.
- Find Progress Bubble under the Visual Elements (or Installed Plugins) section.
- Drag and drop the Progress Bubble element onto your page.
Configure Properties
- Progress Value: Set the value for the progress bar (e.g., percentage or any numeric indicator).
- Hover Fill Color: Choose the color you want the bubble to fill with on hover.
- Base Color: Select the base color of the bar before hover.
- Animation Speed: Set the duration of the hover animation (in milliseconds).
- Easing Type: Choose how the fill effect should ease in or out (linear, ease-in, ease-out, etc.).
Preview & Test
- Preview your page to see the liquid fill animation in action when hovering over the element.
- Adjust any property values until you achieve the desired look and feel.
Deploy
- Once you’re satisfied with your customized Progress Bubble, deploy your changes so that end users can enjoy the dynamic hover experience on your live site.