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.