Progress

<div class="d-flex">
    <div>
        <h3>Current word usage</h3>
        <span class="text-primary">
            147 / 5,000,000
        </span>
    </div>
</div>
<div class="progress mt-1"
     tabindex="0"
     data-bs-toggle="tooltip"
     data-bs-title="0%"
     role="progressbar"
     aria-valuenow="147"
     aria-valuemin="0"
     aria-valuemax="5000000"
>
    <div class="progress-bar" style="width: 0%;"></div>
</div>
<div class="d-flex">
    <div>
        <h3 class="d-flex align-items-center">
            Translation requests
            <i
                role="img"
                tabindex="0"
                aria-label="This is the total monthly number of calls made by every website of your organization to Weglot Translation API. This is approximately equal to the number of translated page views on your website."
                class="material-icons text-black-50 ms-2"
                data-bs-toggle="tooltip"
                data-bs-title="This is the total monthly number of calls made by every website of your organization to Weglot Translation API. This is approximately equal to the number of translated page views on your website."
            >
                info
            </i>
        </h3>
        <span class="text-primary">
            0 / 5,000,000
        </span>
    </div>
</div>
<div class="progress mt-1"
     tabindex="0"
     data-bs-toggle="tooltip"
     data-bs-title="0%"
     role="progressbar"
     aria-valuenow="0"
     aria-valuemin="0"
     aria-valuemax="5000000"
>
    <div class="progress-bar" style="width: 42%;"></div>
</div>
<small class="mt-1">Translation requests count resets on the 1st of each month.</small>

<div class="mb-2 p-1">
    <div class="progress-round" style="width: 30px"  role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="42">
        <div class="progress-round-bar" style="--value: 42"></div>
    </div>    
</div>

<div class="bg-dark p-1 mt-2">
    <div class="progress-round progress-round-secondary" style="width: 30px" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="42">
        <div class="progress-round-bar" style="--value: 42"></div>
    </div>    
</div>

<div class="mt-2 p-1">
    <div class="progress-round progress-round-dark" style="width: 30px" role="progressbar" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-round-bar" style="--value: 22"></div>
    </div>
</div>