Custom Liquid Inventory progress bar?

[DASCPA]

Hello, is it possible to add a progress bar like the attached to the 'featured product' using custom liquid? cant see to find any decent apps. Thanks 

[devcoders]

Hello @DASCPA 
Yes, it's possible to add a progress bar to the Featured Product section using Custom Liquid in Shopify's

[DASCPA]

Thanks for confirming! I did manage to display the banner on the featured product using custom-liquid however the bar is not updated as per when stock is sold. 

<div id="shopify-block-stock-countdown" class="shopify-block shopify-app-block">
<script src="https://cc-timexbar-remix.gadget.app/api/client/web.min.js" defer="defer"></script>

{% assign current_stock = product.variants | where: 'inventory_management', 'shopify' | map: 'inventory_quantity' | sum %}
{% assign total_stock = product.variants | map: 'inventory_quantity' | sum %}

<div class="stock-top">
<div class="stock-message" style="color: rgb(0, 0, 0); font-family: verdana; font-size: 14px; font-weight: normal; text-align: center;">
Hurry! Only 1000 Tickets Remaining ⚡️
</div>

<div class="stock-progress-background" style="background-color: rgb(230, 230, 230); border-radius: 100px; height: 10px; width: 100%; overflow: hidden;">
<div id="stock-progress-bar" class="stock-progress-foreground CC-ST-progress-bar-striped CC-ST-progress-bar-animated" style="background-color: #03bf62; height: 100%; transition: width 0.5s ease-in-out;">
</div>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
var totalStock = {{ total_stock }};
var currentStock = {{ current_stock }};
var progressBar = document.getElementById("stock-progress-bar");

console.log("Total Stock:", totalStock);
console.log("Current Stock:", currentStock);

if (progressBar) {
var percentage = (currentStock / totalStock) * 100;
progressBar.style.width = percentage + "%";
}

var stockNumberElem = document.getElementById("carecart-salespop-sc-number");
if (stockNumberElem) {
stockNumberElem.textContent = currentStock;
}
});
</script>
</div>