<div class="progress-totalizer-panel">
    <div class="progress-totalizer-wrapper">
        <div class="progress-totalizer">
            <div class="progress-totalizer__segments">
                <div class="progress-totalizer__segment progress-totalizer__segment--church" style="width: 60%"></div>
                <div class="progress-totalizer__segment progress-totalizer__segment--individual" style="width: 20%"></div>
                <div class="progress-totalizer__segment progress-totalizer__segment--remaining" style="width: 20%"></div>
            </div>
            <div class="progress-totalizer__markers">
                <div class="progress-totalizer__marker" style="width: 100%"></div>
            </div>
        </div>
    </div>
    <div class="progress-totalizer-legend">
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--church">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Your church has given</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--individual">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Individual regular giving</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--remaining">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Still to raise</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
    </div>
</div>

<div class="progress-totalizer-panel">
    <div class="progress-totalizer-wrapper">
        <div class="progress-totalizer">
            <div class="progress-totalizer__segments">
                <div class="progress-totalizer__segment progress-totalizer__segment--church" style="width: 60%"></div>
                <div class="progress-totalizer__segment progress-totalizer__segment--individual" style="width: 20%"></div>
                <div class="progress-totalizer__segment progress-totalizer__segment--remaining" style="width: 20%"></div>
            </div>
            <div class="progress-totalizer__markers">
                <div class="progress-totalizer__marker" style="width: 100%"></div>
            </div>
        </div>
    </div>
    <div class="progress-totalizer-legend">
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--church">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Your church has given</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--individual">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Individual regular giving</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--remaining">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Still to raise</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
    </div>
</div>