---
title: "Arcade Progress Bar — Free Framer component · Best of Framer"
description: "Free Framer component · by Glipp · Interactive. The Arcade Progress Bar is what happens when your interface takes a joyride through the neon backstreets of 1986 and comes back with better UX."
canonical: "https://framer.elliotli.dev/component/arcade-progress-bar"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Arcade Progress Bar

# Arcade Progress Bar

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

![Arcade Progress Bar preview image 1](https://framer.elliotli.dev/og/component/arcade-progress-bar/6cbea8c28094c3b5/1600x1200.jpg)

## Summary

The Arcade Progress Bar is what happens when your interface takes a joyride through the neon backstreets of 1986 and comes back with better UX.

## Description

## What's in the box?

The Arcade Progress Bar is what happens when your interface takes a joyride through the neon backstreets of 1986 and comes back with better UX. Choose your fighter: **Blocks, BitBox, or Pixel-Heart versions** — each animated with that click-clack-bzzzzt energy of old cathode screens. Set your segment count, direction, and colors until it looks exactly as obsessive as you feel at 2 a.m. Supports determinate, indeterminate, and auto-play modes because sometimes progress is measurable, sometimes it's just a glorious loop. Add a customizable label ("Loading {value}%", "Generating chaos", "Destiny loading…") and tweak the font, alignment, and sass level to match. Perfect for dashboards, loading screens, or any digital moment that needs a hit of quarter-slot drama.

## Properties

-   Variant
    
-   Mode
    
-   Value
    
-   Segments
    
-   Direction
    
-   Auto Play
    
-   Duration
    
-   Loop
    
-   Frame Color
    
-   Panel Color
    
-   Fill Color
    
-   Unfilled Color
    
-   Shadow Color
    
-   Frame Thickness
    
-   Panel Inset
    
-   Segment Gap
    
-   Shadow Offset
    
-   Notch Size
    
-   Label Text
    
-   Label Content
    
-   Label Align
    
-   Label Font
    
-   Label Transform
    
-   Filled Icon
    
-   Empty Icon
    
-   Unfilled Opacity
    

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

-   All · #5164

## Details

- **Author**: Glipp
- **Published**: 2025-10-29
- **Updated**: 2025-10-29
- **Added**: 2025-10-18
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase