Interactive

Progress Bars

Animated skill / progress bars that fill as they appear.

Live demo

See it in action

Interface Design 0%
Frontend Development 0%
Page Builder Mastery 0%
Performance & SEO 0%

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<div class="fw-progress fw-progress--bar fw-progress--rounded fw-progress--countup" style="--fwp-h:10px;--fwp-gap:1.4rem" data-animate="1">
					<div class="fw-progress__item">
						<div class="fw-progress__head">
							<span class="fw-progress__label">Interface Design</span>
							<span class="fw-progress__value" data-count="92">0%</span>
						</div>
						<div class="fw-progress__track" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" aria-label="Interface Design">
							<span class="fw-progress__fill" data-width="92%" style="width:0;"></span>
						</div>
					</div>
					<div class="fw-progress__item">
						<div class="fw-progress__head">
							<span class="fw-progress__label">Frontend Development</span>
							<span class="fw-progress__value" data-count="85">0%</span>
						</div>
						<div class="fw-progress__track" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" aria-label="Frontend Development">
							<span class="fw-progress__fill" data-width="85%" style="width:0;"></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

To learn more about the Progress Bars shortcode, please check out the online manual here.

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free