Below is the HTML, CSS and javascript code that creates animated Progress bar based on the percentage of number of items sold by total items.
Save the below code as html and view in Browser:
<!DOCTYPE html>
<html>
<head>
<title>Progress Bar Update</title>
<style>
/* Styling for the progress bar */
:root {
--change: 280px;
}
#progressBar{
background-color: gold;
width: 100px;
padding: 10px;
border-radius: 5px;
animation: progressBar 2s ease;
animation-fill-mode:both;
text-align: center;
box-sizing: content-box;
border: 1px solid #ccc;
}
@keyframes progressBar {
0% { width: 0; }
100% { width: var(--change); }
}
.progress-container {
position: relative;
background: #eee;
border-radius: 6px;
width: 24%;
overflow: hidden;
}
.progress-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: gold;
}
#itemProgress, #itemPerc {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-style: oblique;
color: red;
}
</style>
</head>
<body>
<div id="itemPerc"></div>
<div class="progress-container">
<div id="progressBar"></div>
</div>
<div id="itemProgress"></div>
<script>
root = document.documentElement;
//setTimeout(function(){ root.style.setProperty('--change', percentage + "px"); }, 5000);
// Function to update the progress bar
function updateProgressBar(soldItems, totalItems) {
const progressBar = document.getElementById('progressBar');
const percentage = (soldItems / totalItems) * 100;
//progressBar.value = percentage;
root.style.setProperty('--change', percentage.toFixed(2) + "%");
const item_progress = document.getElementById('itemProgress');
item_progress.innerHTML = `SOLD ITEMS : ${soldItems} out of ${totalItems}`;
const item_perc = document.getElementById('itemPerc');
item_perc.innerHTML = `${percentage.toFixed(2)}%`;
}
// Function to fetch data from the API
async function fetchDataAndUpdateProgressBar() {
try {
//const url = 'https://dashboard.karmm.com/api/stage/full?secret=wXhshunASXORV08hKkuE95Fe';
//const response = await fetch(url);
//const data = await response.json();
const data1 = JSON.parse('{"total_item":"1500000", "sold_item":"1000000"}');
//alert(data1);
// Assuming the JSON response contains sold_item and total_item fields
//const { sold_item, total_item } = data1;
const sold_item = data1.sold_item;
const total_item = data1.total_item;
//alert(sold_item);
//alert(total_item);
updateProgressBar(sold_item, total_item);
} catch (error) {
console.error('Error fetching data:', error);
}
}
// Call the function to fetch data and update the progress bar
fetchDataAndUpdateProgressBar();
</script>
</body>
</html>