1.4.7

What's new

🌈 New Visual Effects for Progress Bars

outer border-radius

Normalized outer border-radius based on component size (small, medium, large).

Visual Styles for Progress Fill

You can now customize the look of the progress bar using new visual styles:

• radius – rounded corners
• glass – frosted glass effect
• gradient – soft color gradients
• shimmer – animated shimmering

👉 Enable with the new bar_effect option.
➡️ Documentation: here

💧 Redesigned Watermarks

New watermark types provide more visual flexibility:

• blended (default): A subtle colored overlay that merges with the bar’s colors for a more integrated look.
• area: A soft transparent shape placed over the bar, without blending into the bar's colors.
• striped: Diagonal stripes for a patterned effect.
• triangle: Triangle shapes as a watermark.
• round: Rounded shapes applied as a watermark.
• line: Vertical lines pattern (like a hatch effect).

👉 Cleaner and more dynamic rendering.

👉 Request:

• #57 Watermark: opacity (@WaterInTheLake)
• #58 Watermark: line width (@WaterInTheLake)

➡️ Documentation: here

🧩 Technical Improvements

🏗 Full Refactor

• Modular rewrite for both cards and badges
• New config system with automatic validation

⚙️ Better Maintainability

• Reduced code duplication
• Dynamic CSS class handling for flexibility
• Foundation laid for future features

🔧 Migration Notes

No changes required to existing configurations.

To use new effects, add this to your card config:

type: 'custom:entity-progress-card'
entity: sensor.battery_level
bar_effect:
  - shimmer
  - radius

➡️ Documentation: entity-progress-card GitHub repo
➡️ Full Changelog: 1.4.6...1.4.7