---
title: "SVG Fill Indicator — Framer component · Best of Framer"
description: "$9.00 · Framer component · by MJ Jung · Backgrounds. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/svgfillindicator"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/SVG Fill Indicator

# SVG Fill Indicator

[View on Framer](https://framer.com/marketplace/components/svgfillindicator/?via=elliot-li)

![SVG Fill Indicator preview image 1](https://framer.elliotli.dev/og/component/svgfillindicator/f6c36370c6494c91/1600x1200.jpg)

## Summary

1.

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #11115

## Details

- **Author**: MJ Jung
- **Price**: $9.00
- **Published**: 2026-01-22
- **Updated**: 2026-01-23
- **Added**: 2026-01-12
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background