SVG Fill Indicator

1.

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.