Washington National Cathedral Component Library

Progress Bar: Red 

<div class="progress_bar theme_red" style="
		--progress-bar-percent-complete: 35.46%;
	" aria-labelledby="progress_bar-2_title" aria-describedby="progress_bar-2_desc" data-js="progress-bar">
    <header class="progress_bar_header">
        <div class="fs-row fs-lg-justify-center">
            <div class="fs-cell fs-lg-6">
                <div class="progress_bar_header_inner">
                    <div class="progress_bar_subtitle">
                        Optional Sub-Headline
                    </div>

                    <h2 id="progress_bar-2_title" class="progress_bar_title">
                        Progress Bar Title
                    </h2>

                    <div id="progress_bar-2_desc" class="progress_bar_desc">
                        <p>Our goal is audacious and we need your help. Together we will renew the Cathedral so that we can help to heal the world.</p>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="progress_bar_content">
        <div class="fs-row fs-lg-justify-center">
            <div class="fs-cell fs-lg-8">
                <div class="progress_bar_bar" data-progress-bar="bar">
                    <div class="progress_bar_bar_item is_background">
                        <div class="progress_bar_bar_label">Our Progress</div>
                        <div class="progress_bar_bar_current">$97,501</div>
                        <div class="progress_bar_bar_goal">$275,000</div>
                    </div>

                    <div class="progress_bar_bar_item is_foreground">
                        <div class="progress_bar_bar_label">Our Progress</div>
                        <div class="progress_bar_bar_current">$97,501</div>
                        <div class="progress_bar_bar_goal">$275,000</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="progress_bar_footer">
        <div class="fs-row fs-lg-justify-center">
            <div class="fs-cell fs-lg-6">
                <div class="progress_bar_footer_inner">
                    <a href="#" class="progress_bar_cta">
                        Make a Donation
                    </a>
                </div>
            </div>
        </div>
    </footer>
</div>
 
{% set id = uniqid("progress_bar") %}
{% set percent_complete = (bar.current / bar.goal * 100)|round(2, 'ceil') %}

{% set current_title = bar.style == 'number'
	? '$' ~ bar.current|number_format
	: percent_complete ~ '%'
%}
{% set goal_title = '$' ~ bar.goal|number_format %}

<div
	class="progress_bar theme_{{ theme }}"
	style="
		--progress-bar-percent-complete: {{ percent_complete ~ '%' }};
	"
	aria-labelledby="{{ id }}_title"
	{% if description %}
	aria-describedby="{{ id }}_desc"
	{% endif %}
	data-js="progress-bar"
>
	<header class="progress_bar_header">
		<div class="fs-row fs-lg-justify-center">
			<div class="fs-cell fs-lg-6">
				<div class="progress_bar_header_inner">
					{% if subtitle %}
						<div class="progress_bar_subtitle">
							{{ subtitle }}
						</div>
					{% endif %}

					<h2 id="{{ id }}_title" class="progress_bar_title">
						{{ title }}
					</h2>

					{% if description %}
						<div id="{{ id }}_desc" class="progress_bar_desc">
							<p>{{ description }}</p>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</header>

	<div class="progress_bar_content">
		<div class="fs-row fs-lg-justify-center">
			<div class="fs-cell fs-lg-8">
				<div class="progress_bar_bar" data-progress-bar="bar">
					<div class="progress_bar_bar_item is_background">
						<div class="progress_bar_bar_label">{{ bar.title }}</div>
						<div class="progress_bar_bar_current">{{ current_title }}</div>
						<div class="progress_bar_bar_goal">{{ goal_title }}</div>
					</div>

					<div class="progress_bar_bar_item is_foreground">
						<div class="progress_bar_bar_label">{{ bar.title }}</div>
						<div class="progress_bar_bar_current">{{ current_title }}</div>
						<div class="progress_bar_bar_goal">{{ goal_title }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	{% if cta %}
		<footer class="progress_bar_footer">
			<div class="fs-row fs-lg-justify-center">
				<div class="fs-cell fs-lg-6">
					<div class="progress_bar_footer_inner">
						<a href="{{ cta.url }}" class="progress_bar_cta">
							{{ cta.title }}
						</a>
					</div>
				</div>
			</div>
		</footer>
	{% endif %}
</div>

No notes defined.