Skip to content

Fix Stacked progress width transition animation #41659

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix Stacked progress width transition animation #41659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9734c17
Fix transition animation for `.progress-stack`
julien-deramond Aug 16, 2025
d75bc53
Add temp reproducible example in Checkout page
julien-deramond Aug 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions scss/_progress.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@

.progress-stacked > .progress {
overflow: visible;
@include transition(var(--#{$prefix}progress-bar-transition));
}

.progress-stacked > .progress > .progress-bar {
Expand Down
26 changes: 8 additions & 18 deletions site/src/assets/examples/checkout/checkout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,9 @@
// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
'use strict'
function bad() {
const bad = document.getElementById('bad')
bad.style.width = '60%'
}

// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')

// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}

form.classList.add('was-validated')
}, false)
})
})()
function good() {
const good = document.getElementById('good')
good.style.width = '60%'
}
265 changes: 43 additions & 222 deletions site/src/assets/examples/checkout/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,230 +2,51 @@
import { getVersionedDocsPath } from '@libs/path'

export const title = 'Checkout example'
export const extra_css = ['checkout.css']
export const extra_js = [{ src: 'checkout.js' }]
export const body_class = 'bg-body-tertiary'
---
<h2>.progress-stacked bad</h2>

<div class="progress-stacked">
<div
id="bad"
class="progress"
role="progressbar"
aria-label="Percent In Favor"
aria-valuenow="40"
aria-valuemin="0"
aria-valuemax="100"
style="width: 40%"
>
<div class="progress-bar bg-success"></div>
</div>
<div
class="progress"
role="progressbar"
aria-label="Percent Opposed"
aria-valuenow="40"
aria-valuemin="0"
aria-valuemax="100"
style="width: 40%"
>
<div class="progress-bar bg-danger"></div>
</div>
</div>

<div class="container">
<main>
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
<h1 class="h2">Checkout form</h1>
<p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div>

<div class="row g-5">
<div class="col-md-5 col-lg-4 order-md-last">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-primary">Your cart</span>
<span class="badge bg-primary rounded-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Product name</h6>
<small class="text-body-secondary">Brief description</small>
</div>
<span class="text-body-secondary">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Second product</h6>
<small class="text-body-secondary">Brief description</small>
</div>
<span class="text-body-secondary">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Third item</h6>
<small class="text-body-secondary">Brief description</small>
</div>
<span class="text-body-secondary">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-body-tertiary">
<div class="text-success">
<h6 class="my-0">Promo code</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">−$5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span>
<strong>$20</strong>
</li>
</ul>

<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Promo code">
<button type="submit" class="btn btn-secondary">Redeem</button>
</div>
</form>
</div>
<div class="col-md-7 col-lg-8">
<h4 class="mb-3">Billing address</h4>
<form class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-sm-6">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>

<div class="col-sm-6">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>

<div class="col-12">
<label for="username" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<input type="text" class="form-control" id="username" placeholder="Username" required>
<div class="invalid-feedback">
Your username is required.
</div>
</div>
</div>

<div class="col-12">
<label for="email" class="form-label">Email <span class="text-body-secondary">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>

<div class="col-12">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>

<div class="col-12">
<label for="address2" class="form-label">Address 2 <span class="text-body-secondary">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div>

<div class="col-md-5">
<label for="country" class="form-label">Country</label>
<select class="form-select" id="country" required>
<option value="">Choose...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>

<div class="col-md-4">
<label for="state" class="form-label">State</label>
<select class="form-select" id="state" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>

<div class="col-md-3">
<label for="zip" class="form-label">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div>
</div>
</div>

<hr class="my-4">

<div class="form-check">
<input type="checkbox" class="form-check-input" id="same-address">
<label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
</div>

<div class="form-check">
<input type="checkbox" class="form-check-input" id="save-info">
<label class="form-check-label" for="save-info">Save this information for next time</label>
</div>

<hr class="my-4">

<h4 class="mb-3">Payment</h4>

<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">Credit card</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">Debit card</label>
</div>
<div class="form-check">
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="paypal">PayPal</label>
</div>
</div>

<div class="row gy-3">
<div class="col-md-6">
<label for="cc-name" class="form-label">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-body-secondary">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>

<div class="col-md-6">
<label for="cc-number" class="form-label">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
Credit card number is required
</div>
</div>

<div class="col-md-3">
<label for="cc-expiration" class="form-label">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>

<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>

<hr class="my-4">
<button class="btn btn-danger mt-2" onclick="bad()">Bad</button>

<div class="progress mt-2">
<div
id="good"
class="progress-bar bg-success"
role="progressbar"
style="width: 40%"
></div>
<div
class="progress-bar bg-danger"
role="progressbar"
style="width: 40%"
></div>
</div>

<button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
</form>
</div>
</div>
</main>
<button class="btn btn-success mt-2" onclick="good()">Good</button>

<footer class="my-5 pt-5 text-body-secondary text-center text-small">
<p class="mb-1">&copy; 2017–{new Date().getFullYear()} Company Name</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Support</a></li>
</ul>
</footer>
</div>
Loading