francois-le-ko4la / lovelace-entity-progress-card

Lovelace Entity Progress Card [![Home Assistant][ha-badge]][repo-link] [![JavaScript][js-badge]][repo-link] [![Discord][discord-badge]][discord-link] A modern Entity progress card for Home Assistant's Lovelace UI. Table of Contents Jump to the specific section: • ⚡ Description \& features • 📦 Installation • 🧱 Entity Progress Components • 📚 Component Overview • 🎯 Purpose \& Use Cases • ✅ Entity Progress Card • 🧠 When to Use the Template Version? • 🔳 Badge vs. Card – Which One? • 📝 Usage • 🪄 Card and badge Editor • 🧩 Entity Progress Card • 🧩 Entity Progress Card Template • 🧩 Entity Progress Badge • 🧩 Entity Progress Badge Template • 🎨 Theme • 🌍 Language \& Number Support • 🚨 Errors, Deprecations \& Troubleshooting • 👥 Contributing • 🙏 Credits & Acknowledgements • 📄 License --- ⚡ Description & features 🔍 Description This custom version of the **Bar Card** for Home Assistant allows you to display a simple percentage bar that is quick and easy to integrate into your Lovelace cards. It blends seamlessly with the / look & feel of the latest Home Assistant versions. This card is based on custom CSS and leverages existing code to fine-tune the appearance. 🚀 Features • **Percentage Progress Bar**: Displays the progress of a specified entity in percentage. • **Seamless Integration with Home Assistant's Modern UI**: Fully aligns with the "Tile" look & feel of recent Home Assistant versions. • **Dynamic Theme**: Automatically adjusts icons and colors based on the context (e.g., Battery Theme), reflecting the entity's state. • **Enhanced Customization**: Offers a balanced default setup while allowing users to further tailor the card's behavior and appearance through YAML or the card editor (full details below). • **Smooth Animations**: Provides HTML elements that facilitate smooth, visually appealing animations, leveraging well-known mechanisms for easy implementation. • **Interactive Features**: Includes all "xyz_action" option, enabling users to view additional entity details or navigate to another dashboard with a simple click, improving accessibility and usability. • **Performance Optimized**: Code enhancements ensure better performance and maintainability, offering a more stable and responsive experience. • **Multi-Language Support**: Provides localized error messages and descriptions, supporting multiple languages 🇸🇦 🇧🇩 🇨🇿 🇩🇰 🇩🇪 🇬🇷 🇬🇧 🇪🇸 🇫🇮 🇫🇷 🇮🇳🇭🇷 🇮🇩 🇮🇹 🇯🇵 🇰🇷 🇲🇰 🇳🇴 (bokmål) 🇳🇱 🇵🇱 🇵🇹 🇷🇴 🇸🇪 🇹🇭 🇹🇷 🇺🇦 🇻🇳 🇨🇳. [🔼 Back to top] 📦 Installation ⚙️ Prerequisites | Platform | Browsers | | | | | | :----------------: | :--------------------: | :----------------: | :----------------------: | :--------------------: | :------------------: | | ![HA][ha-logo] | ![Chrome][chrome-logo] | ![Edge][edge-logo] | ![Firefox][firefox-logo] | ![Safari][safari-logo] | ![Opera][opera-logo] | | **Home Assistant** | **Chrome** | **Edge** | **Firefox** | **Safari** | **Opera** | | | | | | | | > [!IMPORTANT] > > Ensure your Home Assistant instance is up to date to support this custom card. 📦 Installation Steps is available in HACS (Home Assistant Community Store). Use this link to directly go to the repository in HACS > [!TIP] > > If you are unable to use the button above, follow the steps below: > > - Add this repository to HACS: Go to **HACS** ➡️ **Integrations** ➡️ ** ** > ➡️ **Custom repositories**. > - Paste the URL of this repository and select **Dashboard** as the category. > - Install the Entity Progress Card from HACS. Manual Installation (click to expand) • Download the file (from the last version) to the directory in your Home Assistant setup. • Add to your Lovelace resources: • Go to **Settings** ➡️ **Dashboards** ➡️ **Resources** ➡️ ** ** ➡️ **Add Resource** • Set : • URL: • Type: • Save • reload the browser cache (** ** + ** ** or clear cache). [🔼 Back to top] 🧱 Entity Progress Components This documentation is meant to help you understand and use the different Entity Progress components in Home Assistant (cards and badges, both standard and template versions), providing clear guidance. 📚 Component Overview | Component | Description | | ---------------------------------- | ------------------------------------------------------------ | | **Entity Progress Card** | A simple card displaying a progress bar for a single entity. | | **Entity Progress Card Template** | A more advanced version with full Jinja templating support. | | **Entity Progress Badge** | A compact badge with a mini progress bar. | | **Entity Progress Badge Template** | A templatable badge version for advanced use cases. | Each component is suited for different use cases, depending on display needs, complexity, and UI layout. 🎯 Purpose & Use Cases ✅ Entity Progress Card This card is ideal when: • You want to display the progress of a single entity (e.g., battery level, completion percentage, charging status). • You want easy visual representation with minimal configuration. • You want to enable quick interactions via tap_action, hold_action, or double_tap_action. _Examples_: • Show a vacuum cleaner's cleaning progress. • Display remaining battery percentage for a device. • Monitor the progress of a running script or automation. Essentially, if you need a clear, visually appealing progress bar that's easy to configure and fits well into the Home Assistant ecosystem, this is your go-to card. 🧠 When to Use the Template Version ? Use the Template version (card or badge) when: • You need to calculate the percentage manually from multiple sensor values (e.g., water tank level from height readings). • Your use case involves conditional logic, math, or non-linear scales. • You want to use Jinja2 templates directly in the YAML, without creating extra helpers or sensors. • You need maximum flexibility without being restricted by the standard options. _Examples_: • Calculate energy usage progress from a total daily quota. • Dyn…