---
title: "Ringly — Free Framer component · Best of Framer"
description: "Free Framer component · by Aprilia Gunawan · Charts. Ringly is a single-metric animated donut chart built for stats, progress indicators, and data highlights — the kind of number…"
canonical: "https://framer.elliotli.dev/component/ringly"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/Ringly

# Ringly

A Donut Chart

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

![Ringly preview image 1](https://framer.elliotli.dev/og/component/ringly/9ac7c6a5625686b8/1600x731.jpg)

## Summary

Ringly is a single-metric animated donut chart built for stats, progress indicators, and data highlights — the kind of number you want a visitor's eye to land on.

## Description

Ringly is a single-metric animated donut chart built for stats, progress indicators, and data highlights — the kind of number you want a visitor's eye to land on.

Set your percentage and watch it animate in on appear, with the ring sweeping and the number counting up together. Every visual detail is yours to control: base track color, progress color, number color, stroke width, and overall size, so it matches your brand instead of looking like a stock chart.

Typography is fully open — pick any font already in your project and set the size directly in the component panel, no separate text layer needed.

Timing is tunable too: set your animation duration and delay, choose when it triggers, and decide whether it replays every time it scrolls back into view or plays once and holds. Good for portfolio stats, service pages, dashboards, or anywhere a number deserves a little motion.

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

-   All · #4916

## Details

- **Author**: Aprilia Gunawan
- **Published**: 2026-08-28
- **Updated**: 2026-08-28
- **Added**: 2026-08-28
- **Categories**: Charts

## More like this

-   [29 Radar Chart](/component/29-radar-chart) — BrandingUp · Free — Spider chart with per-axis scales
-   [33 Bubble Chart](/component/33-bubble-chart) — BrandingUp · Free — Bubble chart with 3rd-value sizes
-   [Pricing Matrix](/component/pricing-matrix) — Ainsley Holmes · Free — Currency Payment Comparison Matrix
-   [Radial Dial](/component/radial-dial) — Oli Studio · $10 — Animated dial for a single metric