SVG Fill Indicator

1. Introduction

The SVGFillIndicator component visually represents progress using SVG images, featuring customizable fill styles and animations.

2. Features

• Two fill styles: linear and wave
• Customizable fill directions (left-to-right, right-to-left, bottom-to-top, top-to-bottom)
• Supports SVG images as backgrounds
• Adjustable border radius
• Percentage display with customizable position, color, and font size
• Animation control with various triggers

3. Installation & Setup

To add the SVGFillIndicator component to your Framer project:

• Open your Framer project.
• Navigate to the Components panel.
• Search for "SVGFillIndicator".
• Drag and drop the component onto your canvas.

4. How to Use

• Select the SVGFillIndicator component on the canvas.
• In the right panel, configure the properties-Fill Style: Choose between linear or wave.-Fill Direction: Select the direction of the fill animation.-SVG Image: Upload or link to your SVG image.-Border Radius: Set the desired border radius.-Progress Value: Define the progress percentage (0-100).-Percentage Display: Toggle visibility and customize appearance.-Animation: Configure animation trigger and duration.-Accessibility: Set ARIA labels and motion preferences.
• Preview your component to see the effects of your configurations.

5. Property Controls Reference

fillStyle

• fillStyle (ControlType.Enum, Default: "linear") - Defines the type of fill animation (linear or wave).

fillDirection

• fillDirection (ControlType.Enum, Default: "left-to-right") - Specifies the direction of the fill animation. Options include:- "left-to-right"- "right-to-left"- "bottom-to-top"- "top-to-bottom"

svgImage

• svgImage (ControlType.Image) - The SVG image to be used as the basis for the fill animation.

borderRadius

• borderRadius (ControlType.Number, Default: 0) - Sets the border radius in pixels.

value

• value (ControlType.Number, Default: 65) - The current progress value, ranging from 0 to 100.

percentage

Configures the percentage display settings.

• show (ControlType.Boolean, Default: true) - Determines if the percentage text is shown.
• position (ControlType.Enum, Default: "bottom") - Specifies the position of the percentage text. Options include:- "top"- "center"- "bottom"
• color (ControlType.Color, Default: "#6366F1") - Sets the text color of the percentage display.
• fontSize (ControlType.Number, Default: 16) - Defines the font size of the percentage text in pixels.

animation

Controls the animation behavior.

• trigger (ControlType.Enum, Default: "auto") - Sets the animation trigger mode. Options include:- "auto"- "onView"- "manual"
• duration (ControlType.Number, Default: 1.2) - Specifies the duration of the animation in seconds.

accessibility

Configures accessibility settings for the component.

• ariaLabel (ControlType.String, Default: "Progress indicator") - ARIA label for screen readers.
• respectReducedMotion (ControlType.Boolean, Default: true) - Indicates whether to respect users' motion preferences.