---
title: "Results Meter Card — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Aidan Looker · Cards. What is Results Meter Card?"
canonical: "https://framer.elliotli.dev/component/results-meter-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Results Meter Card

# Results Meter Card

Animated arc meter with metric switching

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

![Results Meter Card preview image 1](https://framer.elliotli.dev/og/component/results-meter-card/09e8d635a5f27085/1600x1200.jpg)

## Summary

What is Results Meter Card?

## Description

## What is Results Meter Card?

Results Meter Card is a premium segmented arc gauge designed for dashboards, landing pages, and data-driven sections. Display key performance metrics inside a polished card with animated arc segments, count-up numbers, trend badges, and contextual insight strips. Switch between multiple metrics on the fly with built-in pill toggles — ideal for showcasing progress, targets, scores, and financial summaries.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Segmented arc meter with configurable segment count (12–36) and thickness, plus hue-aware gradient fill for a smooth tonal progression across filled segments
    
-   Up to six switchable metrics with pill toggle navigation, each with its own value, prefix/suffix, comparison label, trend badge, and insight text
    
-   Five designer-curated theme presets — Glass, Dark Premium, Midnight, Warm Ivory, and Ocean — plus a full Custom mode with nine independent colour controls
    
-   Count-up number animation with eased cubic timing, staggered segment entry, ambient glow effects, and a leading-segment pulse
    
-   Trend badges with automatic positive/negative colour coding, and a contextual insight strip with four icon styles
    
-   Fully responsive layout that adapts arc radius and typography to any container width
    

## Controls inside Framer

### Content

-   Title
    
-   Subtitle
    
-   Metrics array (label, value, prefix, suffix, comparison, insight, trend) — up to 6 entries
    

### Arc Settings

-   Segments (12–36)
    
-   Thickness (6–16 px)
    
-   Gradient Fill toggle
    
-   Min Value
    
-   Max Value
    

### Theme

-   Theme preset selector (Glass, Dark Premium, Midnight, Warm Ivory, Ocean, Custom)
    

### Custom Colours (visible when Theme is set to Custom)

-   Card Background
    
-   Filled Segments
    
-   Unfilled Segments
    
-   Title
    
-   Value
    
-   Comparison
    
-   Insight Text
    
-   Toggle Active
    
-   Toggle Inactive
    

### Animation

-   Enable Animation toggle
    
-   Count Up toggle
    
-   Stagger Fill toggle
    
-   Speed (Fast, Medium, Slow)
    

### Visibility

-   Metric Toggles (show/hide)
    
-   Trend Badge (show/hide)
    
-   Hover Highlight (on/off)
    
-   Insight Strip (show/hide)
    
-   Insight Icon (show/hide)
    
-   Icon Style (Arrow Up, Checkmark, Star, Chart)
    

### Typography

-   Font family
    

### Layout

-   Border Radius (0–40 px)
    

## Best use cases

-   SaaS and fintech dashboards — present revenue, conversion rates, or user growth with animated progress arcs
    
-   Agency and portfolio landing pages — highlight project completion, client satisfaction scores, or performance benchmarks
    
-   Health, fitness, and wellness apps — visualise goals, streaks, or wellness scores with clear, engaging meters
    
-   Investor decks and pitch pages — communicate KPIs with polished, presentation-ready data cards
    

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

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

-   All · #10554

## Details

- **Author**: Aidan Looker
- **Price**: $9.00
- **Published**: 2026-05-12
- **Updated**: 2026-06-13
- **Added**: 2026-05-06
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator