# Countdown Progress Bar

The countdown progress bar is a visual component that transforms countdown timers into animated progress bars.

## Key Features
- **Minimum 50% fill** — never looks empty
- **Smart progress**: 50% baseline at 4+ days, linear to 100% in final 4 days
- **5 animation types**: None, Pulse, Gradient Flow, Left to Right Pulse, Glow Pulse
- **Slanted bars overlay** with customizable width and speed
- **Shadow & glow effects** with color and intensity control

## Implementation Methods

**Method 1: Theme Editor Block**
Add the "GG Progress Bar" block in the Shopify theme editor. No code required.

**Method 2: Custom Liquid (Class-Based)**
```html
<div class="gg-countdown-progress"></div>
```

**Method 3: Page Builder (Attribute-Based)**
```html
<div gg-countdown-progress></div>
```

## CSS Variables

```css
/* Core */
--gg-progress-height: 20px;
--gg-progress-border-radius: 10px;
--gg-progress-start-color: #ef4444;
--gg-progress-end-color: #dc2626;
--gg-progress-bg: #e5e7eb;

/* Animation */
--gg-animation-speed: 2s;
--gg-slanted-speed: 1.5s;
--gg-slanted-width: 8px;

/* Shadow & Glow */
--gg-progress-shadow: 0 0 20px #ff0000;
--gg-glow-color: #ff0000;
```

## Page Builder Integration
Works with PageFly, GemPages, Shogun, and LayoutHub — use their HTML/Custom Code blocks.