diff --git a/power-apps/.DS_Store b/power-apps/.DS_Store
index 3a650a7..790e6aa 100644
Binary files a/power-apps/.DS_Store and b/power-apps/.DS_Store differ
diff --git a/power-apps/progress-bar-card/.DS_Store b/power-apps/progress-bar-card/.DS_Store
new file mode 100644
index 0000000..633847c
Binary files /dev/null and b/power-apps/progress-bar-card/.DS_Store differ
diff --git a/power-apps/progress-bar-card/README.md b/power-apps/progress-bar-card/README.md
new file mode 100644
index 0000000..e9e63ed
--- /dev/null
+++ b/power-apps/progress-bar-card/README.md
@@ -0,0 +1,92 @@
+# Progress Bar Card
+
+## Overview
+The `Progress Bar Card` is a custom HTML component for Power Apps designed to display a progress bar with a title, value, and subtitle.
+
+This component is ideal for visualizing metrics like customer satisfaction rates in an engaging format.
+
+
+
+## Authors
+
+Author (s)| Socials
+--------|---------
+Rudimar Baesso Althof | [GitHub](https://github.com/rualthof) - [YouTube](https://www.youtube.com/@powerrudy) - [Linkedin](https://www.linkedin.com/in/rudimar/)
+
+
+## Features
+- Displays a title, value, and subtitle with a progress bar.
+- Uses a gradient color effect for the progress bar.
+- Customizable properties for title, value, background color, and gradient colors.
+- Simple, clean design suitable for dashboards or report pages in Power Apps.
+
+## Minimal path to awesome
+
+1. Open your canvas app in **Power Apps**
+1. Copy the contents of the **[YAML-file](./source/progress-bar-card.yaml)**.
+1. Right click on the screen where you want to add the snippet and select "Paste YAML"
+
+
+This will add the card to your screen and you can customize the item `HTMLText`property to dynamically change its data.
+
+
+
+
+## YAML Configuration
+
+### Control
+The `htmlProgressBarCard` uses the `HtmlViewer` control to render HTML-based visuals.
+
+## Configuring Properties in the `With` Function
+
+The `htmlProgressBarCard` uses a `With` function to set key properties for customization.
+
+It's located in the `HTMLText` property and here’s a breakdown of each property and how to configure them:
+
+- **Title**: The main title text displayed on the card (e.g., `"Customer Satisfaction"`).
+- **Subtitle**: The text displayed below the progress bar to describe the value (e.g., `"Satisfaction Rate"`).
+- **Value**: The displayed percentage value and progress bar fill level (e.g., `"92%"`).
+- **BgColor**: Background color of the card. Use Power Apps color values, like `Color.White`.
+- **GradientStart**: The starting color of the gradient used for the progress bar and value text (e.g., `"#da22ff"`).
+- **GradientEnd**: The ending color of the gradient for the progress bar and value text (e.g., `"#ff9b44"`).
+
+### Card Configuration Example
+
+Below is the relevant code excerpt showing how to set these properties in the `With` function:
+
+```yaml
+=With(
+ {
+ Title: "Customer Satisfaction",
+ Subtitle: "Satisfaction Rate",
+ Value: "92%",
+ BgColor: Color.White,
+ GradientStart: "#da22ff", // Start color of the gradient
+ GradientEnd: "#ff9b44" // End color of the gradient
+ },
+ // HTML structure that builds the card
+)
+```
+
+Here is an example of how it is configured in the Power Apps interface:
+
+
+## Related Videos
+
+For a complete guide on creating custom controls in Power Apps, check out my playlist on YouTube:
+
+[Power Apps Design & Customizations Playlist 🚀](https://youtube.com/playlist?list=PLJCcpEOSXzJQlsKuP2YeHHyAYjj2x4qsZ&si=aFGKpSEJ0a8KrFpF)
+
+
+This playlist contains all the videos I’ve created on custom controls, with tutorials and tips to enhance your Power Apps projects.
+
+
+
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+
+
+
diff --git a/power-apps/progress-bar-card/assets/.DS_Store b/power-apps/progress-bar-card/assets/.DS_Store
new file mode 100644
index 0000000..7909d8d
Binary files /dev/null and b/power-apps/progress-bar-card/assets/.DS_Store differ
diff --git a/power-apps/progress-bar-card/assets/configuration-demo.png b/power-apps/progress-bar-card/assets/configuration-demo.png
new file mode 100644
index 0000000..301ee87
Binary files /dev/null and b/power-apps/progress-bar-card/assets/configuration-demo.png differ
diff --git a/power-apps/progress-bar-card/assets/pastecode.png b/power-apps/progress-bar-card/assets/pastecode.png
new file mode 100644
index 0000000..15edc66
Binary files /dev/null and b/power-apps/progress-bar-card/assets/pastecode.png differ
diff --git a/power-apps/progress-bar-card/assets/progress-bar-card.png b/power-apps/progress-bar-card/assets/progress-bar-card.png
new file mode 100644
index 0000000..436b5b8
Binary files /dev/null and b/power-apps/progress-bar-card/assets/progress-bar-card.png differ
diff --git a/power-apps/progress-bar-card/assets/sample.json b/power-apps/progress-bar-card/assets/sample.json
new file mode 100644
index 0000000..080da50
--- /dev/null
+++ b/power-apps/progress-bar-card/assets/sample.json
@@ -0,0 +1,50 @@
+[
+ {
+ "$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json",
+ "name": "pnp-powerplatform-snippets-progress-bar-card",
+ "version": "1.0.0.0",
+ "source": "pnp",
+ "creationDateTime": "2024-10-31T00:00:00.000Z",
+ "updateDateTime": "2024-10-31T00:00:00.000Z",
+ "title": "HTML Progress Bar Card",
+ "shortDescription": "A Power Apps YAML snippet for a customizable progress bar card with gradient and text options.",
+ "longDescription": [
+ "This is a Power Apps YAML snippet that displays a customizable HTML-based progress bar card. The card is designed to show a title, percentage value, and descriptive subtitle with gradient color options for visual appeal. Suitable for applications that require easy visualization of progress metrics."
+ ],
+ "url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/progress-bar-card/",
+ "products": [
+ "Power Platform",
+ "Power Apps",
+ "powerplatform-snippets",
+ "power-apps-snippets"
+ ],
+ "tags": ["progress", "gradient", "html", "powerapps"],
+ "categories": ["Visualizations", "Dashboard Components"],
+ "metadata": [
+ {
+ "key": "Product",
+ "value": "Power Apps"
+ },
+ {
+ "key": "Type",
+ "value": "Snippet"
+ }
+ ],
+ "thumbnails": [
+ {
+ "type": "image",
+ "order": 100,
+ "url": "https://raw.githubusercontent.com/rualthof/powerplatform-snippets/main/power-apps/progress-bar-card/assets/progress-bar-card.png",
+ "alt": "Progress Bar Card Preview"
+ }
+ ],
+ "authors": [
+ {
+ "gitHubAccount": "rualthof",
+ "name": "Rudimar Baesso Althof",
+ "pictureUrl": "https://github.com/rualthof.png"
+ }
+ ]
+ }
+ ]
+
\ No newline at end of file
diff --git a/power-apps/progress-bar-card/assets/thumbnail.png b/power-apps/progress-bar-card/assets/thumbnail.png
new file mode 100644
index 0000000..4fbdb03
Binary files /dev/null and b/power-apps/progress-bar-card/assets/thumbnail.png differ
diff --git a/power-apps/progress-bar-card/source/progress-bar-card.yaml b/power-apps/progress-bar-card/source/progress-bar-card.yaml
new file mode 100644
index 0000000..51b571b
--- /dev/null
+++ b/power-apps/progress-bar-card/source/progress-bar-card.yaml
@@ -0,0 +1,33 @@
+- htmlProgressBarCard:
+ Control: HtmlViewer
+ Properties:
+ HtmlText: |+
+ =With(
+ {
+ Title: "Customer Satisfaction",
+ Subtitle: "Satisfaction Rate",
+ Value: "92%",
+ BgColor: Color.White,
+ GradientStart: "#da22ff", // Start color of the gradient
+ GradientEnd: "#ff9b44" // End color of the gradient
+ },
+ $"
+
+
+
{Title}
+
+
{Value}
+
+
+
+
{Subtitle}
+
+