Progress Bar

Overview

The Progress Bar block provides a comprehensive audio progress control system with seeking functionality, time display, and optional visualizations. It's a critical component for creating professional podcast players with full user control over playback position.

The Progress Bar block offers:

• Interactive seeking with drag-and-drop functionality
• Time display showing current and remaining time
• Audio visualizations with bars, dots, or wave animations
• Comprehensive styling with responsive controls
• Accessibility features with keyboard navigation
• Smooth synchronization with other audio blocks

Getting Started

Adding the Progress Bar Block

1. Click the + button in the WordPress editor
2. Search for "Progress Bar" in the PodcasterPlus category
3. Click to insert the block
4. The block will automatically connect to your selected episode

Basic Configuration

When first added, the Progress Bar displays:

• A draggable progress bar
• Current time on the left (0:00)
• Remaining time on the right (-0:00)
• Default styling matching your theme

Settings Panels

Progress Bar Settings

Bar Dimensions

Bar Height (Default: 4px)

• Controls the thickness of the progress bar
• Range: 1px to 20px
• Thicker bars are easier to interact with on touch devices

Bar Border Radius (Default: 2px)

• Controls the roundness of the bar edges
• Range: 0px (square) to 10px (rounded)
• Match your design aesthetic

Thumb Controls

Thumb Width (Default: 12px)

• Width of the draggable thumb/handle
• Range: 8px to 24px
• Larger thumbs are easier to grab on mobile

Thumb Height (Default: 12px)

• Height of the draggable thumb/handle
• Range: 8px to 24px
• Can be different from width for oval shapes

Time Display

Text Size (Default: 14px)

• Font size for time display
• Range: 10px to 20px
• Ensure readability on all devices

Visualization Settings

Visualization Mode

Type (Default: None)

• None: Standard progress bar only
• Bars: Animated vertical bars
• Dots: Bouncing dot animation
• Wave: Smooth waveform animation

Visualization Controls

Density (Default: 10)

• Number of elements in the visualization
• Range: 5 to 50
• More elements mean smoother animation but higher CPU usage

Height (Default: 20px)

• Maximum height of visualization elements
• Range: 10px to 100px
• Balance visibility with layout space

Animation Speed (Default: 1s)

• Speed of the visualization animation
• Range: 0.5s (fast) to 3s (slow)
• Faster speeds feel more dynamic

Show Toggle Button (Default: On)

• Display button to hide/show visualization
• Useful for reducing distractions
• Preserves user preference

Color Settings (Responsive)

All colors support device-specific values:

Progress Colors

Background

• Color of the entire progress bar track
• Default: Semi-transparent gray
• Consider contrast with your theme

Progress

• Color of the filled/played portion
• Default: Theme primary color
• Should stand out clearly

Remaining

• Color of the unplayed portion
• Default: Lighter gray
• Usually subtle but visible

Interactive Colors

Thumb

• Color of the draggable handle
• Default: Matches progress color
• Must be easily visible

Thumb Hover

• Color when hovering over thumb
• Default: Slightly darker than thumb
• Provides visual feedback

Display Colors

Text

• Color of time display text
• Default: Theme text color
• Ensure readability

Visualization

• Color of visualization elements
• Default: Matches progress color
• Can be different for visual interest

Layout Settings (Responsive)

Control the arrangement and behavior across devices.

Width Control

Use Custom Width

• Toggle to set specific width
• Default: Off (100% container width)
• Useful for centered designs

Width Value

• When custom width is enabled
• Can use px, %, em, rem units
• Example: "80%" or "400px"

Display Settings (Responsive)

Visibility

Show on Desktop/Tablet/Mobile

• Control visibility per device
• Hide on specific screen sizes
• Useful for alternative mobile layouts

Sticky Positioning

Enable Sticky

• Make progress bar stick while scrolling
• Useful for long-form content
• Keeps controls accessible

Position

• Top or bottom of viewport
• Consider your layout design
• Bottom often works better for mobile

Common Use Cases

Standard Audio Player

Most common configuration:

1. Leave visualization off
2. Set comfortable thumb size (14-16px)
3. Use theme-matching colors
4. Keep default time display

Visual Podcast Player

For enhanced visual experience:

1. Enable "bars" visualization
2. Set density to 20-30
3. Match visualization color to brand
4. Enable toggle button for user control

Minimal Progress Indicator

For space-constrained layouts:

1. Reduce bar height to 2-3px
2. Hide time display with CSS
3. Use smaller thumb (10px)
4. Disable visualizations

Mobile-Optimized Player

For touch-friendly design:

1. Increase bar height to 6-8px
2. Use larger thumb (16-20px)
3. Increase text size to 16px
4. Consider sticky positioning

Working with Visualizations

Bars Animation

The bars visualization creates a classic audio equalizer effect:

• Each bar animates independently
• Height varies to create wave effect
• Animation loops continuously during playback
• Pauses when audio is paused

Dots Animation

The dots visualization provides a playful bounce effect:

• Dots move up and down rhythmically
• Creates a lighter, modern feel
• Less CPU intensive than bars
• Good for minimalist designs

Wave Animation

The wave visualization shows a smooth sine wave:

• Single continuous wave form
• Flows smoothly during playback
• Most subtle of the three options
• Elegant for professional designs

Performance Considerations

Visualizations use CSS animations for efficiency:

• GPU-accelerated when possible
• Minimal JavaScript overhead
• Automatically pause when hidden
• Consider disabling on older devices

Best Practices

Accessibility

1. Keyboard Navigation
   • Arrow keys adjust position
   • Tab key focuses the control
   • Enter/Space don't interfere with playback
2. Screen Readers
   • Proper ARIA labels included
   • Current time announced
   • Progress percentage available
3. Touch Targets
   • Minimum 44x44px touch area
   • Larger thumbs for mobile
   • Adequate spacing from other controls

Responsive Design

1. Mobile Optimization
   • Increase interactive element sizes
   • Simplify or hide visualizations
   • Consider vertical layouts
2. Tablet Adjustments
   • Balance between desktop and mobile
   • Test landscape orientation
   • Maintain touch-friendly sizing
3. Desktop Enhancement
   • Can use smaller, precise controls
   • Enable visualizations for interest
   • Hover states for better feedback

Performance

1. Visualization Settings
   • Lower density for older devices
   • Disable on mobile if needed
   • Test on target devices
2. Smooth Seeking
   • Progress updates are throttled
   • Drag operations are optimized
   • No lag during interaction

Integration Tips

With Other Blocks

The Progress Bar integrates seamlessly with:

• Play Button: Controls playback state
• Volume Control: Independent but synchronized
• Skip Controls: Updates position immediately
• Time Display: Can hide built-in display if using separate

Custom Styling

Apply custom CSS for unique designs:

/* Custom progress bar colors */
.wp-block-podcaster-plus-progress-bar {
  --pp-progress-bar-color-progress-desktop: #007cba;
  --pp-progress-bar-color-thumb-desktop: #005a87;
}

/* Hide time display */
.progress-bar-time-container {
  display: none;
}

/* Larger mobile thumb */
@media (max-width: 767px) {
  .wp-block-podcaster-plus-progress-bar {
    --thumb-width: 20px;
    --thumb-height: 20px;
  }
}

Troubleshooting

Progress Bar Not Updating

Check these items:

• Episode is properly selected
• Audio file is loading correctly
• No JavaScript errors in console
• Browser supports required features

Seeking Not Working

Common causes:

• Audio file doesn't support seeking
• CORS issues with external files
• Browser security restrictions
• File still loading

Visualization Not Showing

Verify:

• Visualization type is selected
• Not hidden via toggle button
• Container has sufficient height
• No CSS conflicts hiding elements

Time Display Issues

Solutions:

• Check text color contrast
• Verify font size is readable
• Ensure container width is adequate
• Test with different time formats

Performance Problems

Optimize by:

• Reducing visualization density
• Disabling animations on mobile
• Using simpler visualization type
• Testing on actual devices

Frequently Asked Questions

Q: Can I hide the time display?
A: Yes, use custom CSS to hide .progress-bar-time-container.

Q: How do I make the bar thicker on mobile?
A: Use the responsive controls to set a larger bar height for mobile devices.

Q: Can I change the time format?
A: The format automatically adjusts based on duration (MM:SS or H:MM:SS).

Q: Do visualizations work on all browsers?
A: Yes, they use CSS animations with broad support. Older browsers show static versions.

Q: Can I style the thumb differently for hover?
A: Yes, use the Thumb Hover color setting in the responsive color controls.

Q: Is the progress bar accessible?
A: Yes, it includes proper ARIA labels, keyboard navigation, and screen reader support.

Q: Can I use multiple progress bars?
A: While technically possible, it's not recommended as they would show the same progress.

Advanced Features

Custom Visualizations

Developers can extend visualizations:

• Hook into the animation system
• Create custom CSS animations
• Add new visualization types
• Integrate with audio analysis

Programmatic Control

The progress bar can be controlled via JavaScript:

• Update position programmatically
• Listen to seek events
• Integrate with custom players
• Sync with external controls

Accessibility Enhancements

Additional accessibility features:

• Skip to content buttons
• Keyboard shortcuts
• Custom ARIA descriptions
• High contrast mode support

Summary

The Progress Bar block is a sophisticated yet user-friendly component that provides essential audio navigation controls. With its responsive design system, multiple visualization options, and comprehensive styling controls, it can be adapted to any podcast player design while maintaining accessibility and performance standards.

Remember to test your progress bar across different devices and with real audio files to ensure the best user experience for your podcast audience.