Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        body {
            height: 100vh;
        }

        .productionLine {
            position: relative;
            width: 80%;
            height: 60%;
            /* background-color: #ddd; */
            margin: 200px auto;
            overflow: hidden;
        }

        .progress-bar {
            background-color: green;
        }

        .engineStop {
            background-color: red;
        }

        .right {
            transform: rotate(180deg);
        }

        .positionBot {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .positionRight {
            position: absolute;
            transform: rotate(90deg);
            top: 0;
            right: calc(-100% + 50px);
            left: 0;
        }

        .positionLeft {
            position: absolute;
            transform: rotate(270deg);
            top: 0;
            left: calc(-100% + 50px);
            right: 0;
        }

        .progress {
            margin-bottom: 0;
        }

        button {
            position: absolute;
            top: 10px;
            left: 0;
            right: 0;
            width: 200px;
            height: 100px;
            margin: 10px auto;
        }

        .radius {
            border-radius: 50px;
        }
    </style>
</head>

<body>

    <div class="productionLine radius">
        <div class="progress" style="height: 50px;">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="90"
                aria-valuemin="0" aria-valuemax="100" style="width:100%">
            </div>

        </div>
        <div class="progress positionLeft reverse" style="height: 50px;">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="90"
                aria-valuemin="0" aria-valuemax="100" style="width:100%">
            </div>

        </div>
        <div class="progress positionRight" style="height: 50px;">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="90"
                aria-valuemin="0" aria-valuemax="100" style="width:100%">
            </div>

        </div>
        <div class="progress right positionBot" style="height: 50px;">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="90"
                aria-valuemin="0" aria-valuemax="100" style="width:100%">
            </div>

        </div>
    </div>
    <button> Włącz/Wyłącz</button>
    <script>
        let lines = '';
        document.querySelector('button').addEventListener('click', () => {
            lines = document.querySelectorAll('.progress-bar')
            lines.forEach(element => {
                element.classList.toggle('engineStop')

            });
        })
    </script>

</body>

</html>