SVG Fill Indicator

Premium Interactions Component by MJ Jung

Show PreviewBuy for $9
SVG Fill Indicator

About 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.