<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #mine {
            border: 2px solid black;
            background-color: #4d999f;
            border-radius: 10px;
        }

        #inventory {
            width: 1000px;
            height: 300px;
            overflow: hidden;
            border: 1px solid black;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 515px;
            bottom: 642px;
        }
    
        #inventory ul {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            grid-auto-rows: 1fr;
            gap: 4px;
            width: 100%;
            height: 100%;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #inventory ul li {
            border: 1px solid black;
            padding: 10px;
            font-size: 15px;
            text-align: center;
            justify-content: center;
            align-items: center;
            background-color: #4d999f;
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
        }

        body {
            height: 100vh;
            overflow-y: hidden;
            background: linear-gradient(to bottom right, blue, pink);
        }

        #progressContainer {
            width: 10%;
            background-color: #f3f3f3;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 20px 0;
        }
        #progressBar {
            width: 0%;
            height: 30px;
            background-color: #4caf50;
            transition: width 0.1s linear; /* plavnenko */
        }
    </style>
</head>
<body>
    
    <button id="mine" style="height: 500px; width: 500px;" onclick="mine()">Mine</button>

    <div id="progressContrainer">
        <div id="progressBar"></div>
    </div>

    <div id="inventory">
        <ul id="list"></ul>
    </div>
    
    <script>
        // main variables
        let isMining = false; //for mine function
        let inventory = []; //main inventory
        let itemsID = ["Stick", "Rock", "Flint"] //ids of items
        let amountToGive = 1; //mine function to give
        let miningTime = 3000;

        window.onload = function() {
            inventorySetup();
            addInvenetoryUI();
        };

        function getItemSearch() {
            let item = itemsID[Math.floor(Math.random() * itemsID.length)];
            return item;
        }

        function mine() { //mine function
            if (isMining) return; //если false тогда дальше идет функция, если true, то стоп.

            isMining = true; //возвращаем флаг на тру

            startBar(miningTime)

            setTimeout(() => { //таймаут функция
                isMining = false;

                let newItem = getItemSearch(); //ретурнем предмет

                // чекаем предмет
                let found = false;                              //УДАЧИ ЗДЕСЬ ЧТО ТО ПОНЯТЬ, Я САМ НИЧЕГО НЕ ПОНИМАЮ, ХОТЯ ПИСАЛ ЭТОТ КОД 2 МИНУТЫ НАЗАД
                for (let i = 0; i < inventory.length; i++) {
                    const li = document.getElementById(i);
                    if (inventory[i] && inventory[i].name === newItem) {
                            if (inventory[i].amount < 64) {

                                inventory[i].amount = inventory[i].amount + amountToGive; // увеличиваем если нашли! + система оверфлова для инвентаря... тяжело... 
                                if (inventory[i].amount > 64) {
                                    let valueOverflow = inventory[i].amount - 64; //Всё ниже только для оверфлоу
                                    inventory[i].amount = 64
                                    let emptyElement = inventory.indexOf("Empty")
                                    let itemElement = inventory.indexOf(inventory[i].name)
                                    if (emptyElement !== -1) {
                                        inventory[emptyElement] = { name: newItem, amount: valueOverflow };
                                        document.getElementById(emptyElement).innerHTML = inventory[emptyElement].name + " " + inventory[emptyElement].amount + "x";
                                    } else if (itemElement !== -1) {
                                        inventory[itemElement] = { name: newItem, amount: valueOverflow };
                                        document.getElementById(itemElement).innerHTML = inventory[itemElement].name + " " + inventory[itemElement].amount + "x";
                                    }
                                }

                                li.innerHTML = inventory[i].name + " " + inventory[i].amount + "x";
                                found = true;
                                break;
                        }
                    }
                }

                // ищем если нет предмета
                if (!found) {
                    let emptyElement = inventory.indexOf("Empty"); // пустой слот ищем
                    if (emptyElement !== -1) {
                        inventory[emptyElement] = { name: newItem, amount: amountToGive }; // добавляем предмет

                        if (inventory[emptyElement].amount > 64) {
                            let addedOverflow = inventory[emptyElement].amount - 64;
                            inventory[emptyElement].amount = 64;
                            let emptyElementAnother = inventory.indexOf("Empty")
                            inventory[emptyElementAnother] = { name: newItem, amount: addedOverflow };
                            document.getElementById(emptyElementAnother).innerHTML = inventory[emptyElementAnother].name + " " + inventory[emptyElementAnother].amount + "x";
                        }

                        const li = document.getElementById(emptyElement);
                        li.innerHTML = inventory[emptyElement].name + " " + inventory[emptyElement].amount + "x";
                    }
                }
            }, miningTime   );
        }

        function addInvenetoryUI(){
            for (i = 0; i < 36; i++) {
                const inventoryHTML = document.getElementById("list");
                const li = document.createElement("li");
                li.setAttribute("id", i);
                li.innerHTML = inventory[i];
                inventoryHTML.appendChild(li);
            }
        }

        function inventorySetup() {
            for (i = 0; i < 36; i++) {
                inventory.push("Empty")
            }
        }

        function startBar(time) {
            const progressBar = document.getElementById("progressBar")
            progressBar.style.width = '0%'; // Ресетим бам
            let startTime = null;

            function animateProgress(timestamp) {
                if (!startTime) startTime = timestamp; // ищем время после запуска
                const elapsed = timestamp - startTime;
                const width = Math.min((elapsed / time) * 100, 100); // ширина

                progressBar.style.width = width + '%';

                if (elapsed < time) {
                    requestAnimationFrame(animateProgress); // анимация
                } else {
                    progressBar.style.width = '0%'; // ресет
                }
            }

            requestAnimationFrame(animateProgress); // старт анимации
        }
    </script>

</body>
</html>



сделай прогресс бар рамку чтоб было видно сначало просто пустой прогресс бар, также ограничить его под ширину кнопки