5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Te9e,

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.

5a:[["$","$L5d",null,{"post":{"id":"019be5ea-95bf-7e10-bbad-c0d218594cea","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"oDhBZSm2sgfMuJYfcfGh","resolved":true,"title":"SVG Fill Indicator","body":"$5e","bodyJson":null,"introduction":"","slug":"svgfillindicator","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/oDhBZSm2sgfMuJYfcfGh/svgfillindicator-3wV1zYCHGqHvsokyyDJbAEkKG0FfWy","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-12T14:59:24.231Z","updatedAt":"2026-01-23T13:41:41.021Z","publishedAt":"2026-01-22T13:35:14.879Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://yummy-spots-249881.framer.app/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_JFmtLlBoz9SYP7GbekWZmkzqOP429UzegScc129DiD2","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"SgYY8azs1MygGV9lfG62","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-22T13:35:14.879Z","updatedAt":"2026-01-22T13:35:14.879Z","reported":false}}],"$L5f"]

Suggested for you