hold-to-confirmHold to confirm
长按确认English definition
A timed progress indicator advances while continuous press input is maintained and completes at a threshold.
Chinese translation
用户持续按住按钮时逐步填满的进度效果。
hold-to-confirmHold to confirm
Show cancellable progress during hold-to-confirm interactions to reduce mistakes.
Preview
A timed progress indicator advances while continuous press input is maintained and completes at a threshold.
FullReduced
FullReduced
Preview
Implement Hold to confirm: Show cancellable progress during hold-to-confirm interactions to reduce mistakes. Use Confirmation duration 1200ms, Hold scale 98%, Easing linear. Trigger it from real pointer, touch, or keyboard interaction. Use semantic HTML, scope CSS to .motion-demo--hold-to-confirm, and mount the provided vanilla JavaScript interaction runtime. Provide equivalent low-motion behavior for prefers-reduced-motion and .force-reduced-motion.
<div class="motion-demo motion-demo--hold-to-confirm" data-motion="hold-to-confirm" aria-label="Hold to confirm demo">
<div><button class="motion-button" type="button" data-hold-button data-idle-label="Hold to confirm" data-complete-label="Confirmed" data-hold-message="Keep holding to confirm" data-cancel-label="Action cancelled" aria-pressed="false"><span data-hold-label>Hold to confirm</span><span class="motion-progress" data-hold-progress aria-hidden="true"></span></button><span class="motion-status" data-motion-status role="status" aria-live="polite"></span></div>
</div>.motion-demo.motion-demo--hold-to-confirm {
box-sizing: border-box;
position: relative;
display: grid;
place-items: center;
width: min(100%, 34rem);
min-height: 15rem;
padding: 2rem;
overflow: hidden;
color: #18181b;
background: #fafafa;
border: 1px solid #e4e4e7;
border-radius: 16px;
isolation: isolate;
}
.motion-demo.motion-demo--hold-to-confirm *, .motion-demo.motion-demo--hold-to-confirm *::before, .motion-demo.motion-demo--hold-to-confirm *::after {
box-sizing: border-box;
}
.motion-demo.motion-demo--hold-to-confirm .motion-surface {
position: relative;
display: grid;
gap: 0.65rem;
width: min(100%, 18rem);
padding: 1.25rem;
background: #ffffff;
border: 1px solid #e4e4e7;
border-radius: 16px;
box-shadow: none;
}
.motion-demo.motion-demo--hold-to-confirm .motion-surface strong { font-weight: 500; }
.motion-demo.motion-demo--hold-to-confirm .motion-line {
display: block;
width: 100%;
height: 0.5rem;
background: #e4e4e7;
border-radius: 999px;
}
.motion-demo.motion-demo--hold-to-confirm .motion-line:last-child { width: 62%; }
.motion-demo.motion-demo--hold-to-confirm .motion-button {
position: relative;
min-height: 2.75rem;
padding: 0.75rem 1.1rem;
color: white;
font: inherit;
font-weight: 700;
background: #18181b;
border: 0;
border-radius: 999px;
cursor: pointer;
}
.motion-demo.motion-demo--hold-to-confirm .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }
.motion-demo.motion-demo--hold-to-confirm .motion-action-row {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 0.85rem;
}
.motion-demo.motion-demo--hold-to-confirm .motion-replay-scene {
width: min(100%, 22rem);
display: grid;
place-items: center;
}
.motion-demo.motion-demo--hold-to-confirm .motion-pausable-scene {
width: min(100%, 22rem);
display: grid;
place-items: center;
}
.motion-demo.motion-demo--hold-to-confirm button.motion-surface {
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
}
.motion-demo.motion-demo--hold-to-confirm .motion-replay-button,
.motion-demo.motion-demo--hold-to-confirm .motion-undo-button,
.motion-demo.motion-demo--hold-to-confirm .motion-dismiss-button,
.motion-demo.motion-demo--hold-to-confirm .motion-pause-button {
min-height: 2.75rem;
padding: 0.65rem 0.9rem;
color: #18181b;
font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
background: #ffffff;
border: 1px solid #d4d4d8;
border-radius: 8px;
cursor: pointer;
}
.motion-demo.motion-demo--hold-to-confirm .motion-replay-button:focus-visible,
.motion-demo.motion-demo--hold-to-confirm .motion-undo-button:focus-visible,
.motion-demo.motion-demo--hold-to-confirm .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--hold-to-confirm .motion-pause-button:focus-visible,
.motion-demo.motion-demo--hold-to-confirm [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--hold-to-confirm [data-swipe-target]:focus-visible {
outline: 3px solid rgb(37 99 235 / 32%);
outline-offset: 3px;
}
.motion-demo.motion-demo--hold-to-confirm .motion-status {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.motion-demo.motion-demo--hold-to-confirm .motion-ripple-ink {
position: absolute;
width: 12px;
height: 12px;
pointer-events: none;
background: rgb(255 255 255 / 72%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.95);
opacity: 0;
}
.motion-demo.motion-demo--hold-to-confirm .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--hold-to-confirm .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 16px; }
.motion-demo.motion-demo--hold-to-confirm .motion-state--to { background: #18181b; color: white; }
.motion-demo.motion-demo--hold-to-confirm .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--hold-to-confirm .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--hold-to-confirm .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--hold-to-confirm svg { width: min(100%, 20rem); height: auto; }
.motion-demo.motion-demo--hold-to-confirm .motion-button { position: relative; overflow: hidden; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background-color 120ms ease-out; }
.motion-demo.motion-demo--hold-to-confirm .motion-button:active { transform: scale(0.98); }
.motion-demo.motion-demo--hold-to-confirm .motion-progress { position: absolute; inset: auto 0 0; height: 4px; pointer-events: none; background: #2563eb; clip-path: inset(0 100% 0 0); }
.motion-demo.motion-demo--hold-to-confirm .motion-button[data-state="holding"] { background: #1d4ed8; }
.motion-demo.motion-demo--hold-to-confirm .motion-button[data-state="complete"] { background: #166534; }
@keyframes motion-hold-to-confirm-reduced-fade {
from { opacity: 0.84; }
to { opacity: 1; }
}
.force-reduced-motion .motion-demo.motion-demo--hold-to-confirm {
animation: motion-hold-to-confirm-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}
.force-reduced-motion .motion-demo.motion-demo--hold-to-confirm *,
.force-reduced-motion .motion-demo.motion-demo--hold-to-confirm *::before,
.force-reduced-motion .motion-demo.motion-demo--hold-to-confirm *::after {
animation: none !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-property: opacity, color, background-color, border-color !important;
transition-duration: 160ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.force-reduced-motion .motion-demo.motion-demo--hold-to-confirm .motion-button,
.force-reduced-motion .motion-demo.motion-demo--hold-to-confirm [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--hold-to-confirm [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--hold-to-confirm [data-spring-target] {
transform: none !important;
}
.force-reduced-motion .motion-demo.motion-demo--hold-to-confirm .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--hold-to-confirm .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--hold-to-confirm .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
.motion-demo.motion-demo--hold-to-confirm {
animation: motion-hold-to-confirm-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}
.motion-demo.motion-demo--hold-to-confirm *, .motion-demo.motion-demo--hold-to-confirm *::before, .motion-demo.motion-demo--hold-to-confirm *::after {
animation: none !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-property: opacity, color, background-color, border-color !important;
transition-duration: 160ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.motion-demo.motion-demo--hold-to-confirm .motion-button,
.motion-demo.motion-demo--hold-to-confirm [data-reorder-item],
.motion-demo.motion-demo--hold-to-confirm [data-swipe-target],
.motion-demo.motion-demo--hold-to-confirm [data-spring-target] {
transform: none !important;
}
.motion-demo.motion-demo--hold-to-confirm .motion-path { stroke-dashoffset: 0 !important; }
.motion-demo.motion-demo--hold-to-confirm .motion-word--from { opacity: 0 !important; visibility: hidden; }
.motion-demo.motion-demo--hold-to-confirm .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}(() => {
const config = {
"id": "hold-to-confirm",
"duration": 1200,
"distance": 72,
"resistance": 65,
"position": 50,
"stiffness": 220,
"damping": 24,
"mass": 1,
"velocity": 0,
"rippleSize": 220,
"rippleOpacity": 24,
"dragScale": 98,
"autoplay": false
};
const mount = (root, config) => {
const cleanups = [];
const addCleanup = (callback) => cleanups.push(callback);
const cleanup = () => {
for (let index = cleanups.length - 1; index >= 0; index -= 1) {
try { cleanups[index](); } catch { /* keep cleanup reentrant */ }
}
cleanups.length = 0;
};
const on = (target, type, listener, options) => {
target.addEventListener(type, listener, options);
addCleanup(() => target.removeEventListener(type, listener, options));
};
const reduced = () => root.closest(".force-reduced-motion") !== null ||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const watchReduced = (callback) => {
const media = window.matchMedia("(prefers-reduced-motion: reduce)");
const notify = () => callback(reduced());
media.addEventListener("change", notify);
const observer = typeof MutationObserver === "undefined" ? null : new MutationObserver(notify);
let ancestor = root;
while (observer && ancestor) {
observer.observe(ancestor, { attributes: true, attributeFilter: ["class"] });
ancestor = ancestor.parentElement;
}
addCleanup(() => {
media.removeEventListener("change", notify);
if (observer) observer.disconnect();
});
};
const button = root.querySelector("[data-hold-button]");
const progress = root.querySelector("[data-hold-progress]");
const label = root.querySelector("[data-hold-label]");
const status = root.querySelector("[data-motion-status]");
if (!button || !progress || !label) return cleanup;
const initialLabel = button.dataset.idleLabel || label.textContent || "Confirm";
const initialStatus = status ? status.textContent : "";
let pointerId = null;
let keyboard = false;
let completed = false;
let deadline = 0;
let timer = 0;
let progressAnimation = null;
let releaseAnimation = null;
const setStatus = (message) => { if (status) status.textContent = message; };
const clearWork = () => {
window.clearTimeout(timer);
timer = 0;
if (progressAnimation) progressAnimation.cancel();
if (releaseAnimation) releaseAnimation.cancel();
progressAnimation = null;
releaseAnimation = null;
};
const resetVisual = () => {
completed = false;
button.dataset.state = "idle";
button.setAttribute("aria-pressed", "false");
label.textContent = initialLabel;
progress.style.clipPath = "inset(0 100% 0 0)";
progress.style.opacity = "";
};
const canonical = () => {
clearWork();
if (pointerId !== null && button.hasPointerCapture(pointerId)) button.releasePointerCapture(pointerId);
pointerId = null;
keyboard = false;
deadline = 0;
resetVisual();
setStatus(initialStatus || "");
};
addCleanup(canonical);
const complete = () => {
if (completed) return;
clearWork();
completed = true;
keyboard = false;
if (pointerId !== null && button.hasPointerCapture(pointerId)) button.releasePointerCapture(pointerId);
pointerId = null;
deadline = 0;
progress.style.clipPath = "inset(0 0 0 0)";
progress.style.opacity = "";
button.dataset.state = "complete";
button.setAttribute("aria-pressed", "true");
label.textContent = button.dataset.completeLabel || "Confirmed";
setStatus(button.dataset.completeLabel || "Confirmed");
button.dispatchEvent(new CustomEvent("motion:confirm", { bubbles: true }));
};
const cancelHold = () => {
if (completed) return;
const clip = getComputedStyle(progress).clipPath;
clearWork();
if (pointerId !== null && button.hasPointerCapture(pointerId)) button.releasePointerCapture(pointerId);
pointerId = null;
keyboard = false;
deadline = 0;
button.dataset.state = "idle";
button.setAttribute("aria-pressed", "false");
label.textContent = initialLabel;
if (reduced()) {
progress.style.clipPath = "inset(0 100% 0 0)";
progress.style.opacity = "";
} else {
progress.style.clipPath = clip;
releaseAnimation = progress.animate(
[{ clipPath: clip, opacity: 1 }, { clipPath: "inset(0 100% 0 0)", opacity: 0.55 }],
{ duration: 160, easing: "cubic-bezier(0.23, 1, 0.32, 1)", fill: "forwards" }
);
releaseAnimation.addEventListener("finish", () => {
releaseAnimation = null;
progress.style.clipPath = "inset(0 100% 0 0)";
progress.style.opacity = "";
}, { once: true });
}
setStatus(button.dataset.cancelLabel || "Cancelled");
button.dispatchEvent(new CustomEvent("motion:cancel", { bubbles: true }));
};
const run = () => {
if (completed || (pointerId === null && !keyboard)) return;
window.clearTimeout(timer);
timer = 0;
if (progressAnimation) progressAnimation.cancel();
if (releaseAnimation) releaseAnimation.cancel();
progressAnimation = null;
releaseAnimation = null;
const total = Math.max(1, config.duration);
const remaining = Math.max(0, deadline - performance.now());
const value = Math.min(1, Math.max(0, 1 - remaining / total));
button.dataset.state = "holding";
button.setAttribute("aria-pressed", "false");
label.textContent = button.dataset.holdMessage || "Hold to confirm";
setStatus(button.dataset.holdMessage || "Hold to confirm");
if (remaining === 0) { complete(); return; }
if (reduced()) {
progress.style.clipPath = "inset(0 75% 0 0)";
progress.style.opacity = "0.55";
timer = window.setTimeout(complete, remaining);
return;
}
progress.style.opacity = "";
progressAnimation = progress.animate(
[
{ clipPath: "inset(0 " + String((1 - value) * 100) + "% 0 0)" },
{ clipPath: "inset(0 0 0 0)" }
],
{ duration: remaining, easing: "linear", fill: "forwards" }
);
progressAnimation.addEventListener("finish", complete, { once: true });
};
const start = () => { deadline = performance.now() + Math.max(1, config.duration); run(); };
const pointerDown = (event) => {
if (!event.isPrimary || event.button !== 0 || pointerId !== null || keyboard) return;
if (completed) resetVisual();
pointerId = event.pointerId;
button.setPointerCapture(event.pointerId);
start();
};
const pointerEnd = (event) => {
if (event.pointerId !== pointerId) return;
if (button.hasPointerCapture(event.pointerId)) button.releasePointerCapture(event.pointerId);
if (!completed) cancelHold();
};
const keyDown = (event) => {
if (event.key !== "Enter" && event.key !== " ") return;
event.preventDefault();
if (event.repeat || keyboard || pointerId !== null) return;
if (completed) resetVisual();
keyboard = true;
start();
};
const keyUp = (event) => {
if ((event.key !== "Enter" && event.key !== " ") || !keyboard) return;
event.preventDefault();
keyboard = false;
if (!completed) cancelHold();
};
const blur = () => { if (keyboard && !completed) cancelHold(); };
watchReduced(run);
on(button, "pointerdown", pointerDown);
on(button, "pointerup", pointerEnd);
on(button, "pointercancel", pointerEnd);
on(button, "keydown", keyDown);
on(button, "keyup", keyUp);
on(button, "blur", blur);
return cleanup;
};
document.querySelectorAll("[data-motion=\"hold-to-confirm\"]").forEach((root) => {
const cleanupKey = "__motionLexiconCleanup";
if (typeof root[cleanupKey] === "function") root[cleanupKey]();
root[cleanupKey] = mount(root, config);
});
})();Learn more
Terms and distinctions
Before implementation
- Purpose
- Confirm a high-risk action through cancellable sustained progress, reducing accidental activation.
- Frequency
- Reserve for infrequent consequential actions and keep ordinary controls immediate.
- Trigger
- Begin on sustained press and submit exactly once when the threshold is reached.
- Enter / exit
- Fill progress continuously from zero, clearing and returning to idle on early release, exit, or cancel.
- Interruptibility
- Every cancel event stops timing immediately; a new press restarts from zero with a clear state.
- Gesture and keyboard
- Support pointer capture, touch cancellation, and keyboard holding, plus an accessible alternative confirmation flow.
- Reduced-motion strategy
- Use static progress or countdown text without filling motion, and allow a standard two-step confirmation.
Accessibility
Reduced motion
Use static progress or countdown text without filling motion, and allow a standard two-step confirmation.
Parameter reference
| Parameter | Range / options | Default | Purpose |
|---|---|---|---|
duration | 600ms–2400ms | 1200ms | Leaves enough hold time to express deliberate intent; release recovery should stay brief. |
scale | 70%–105% | 98% | Controls scale in the active state. |
ease | Soft / Snap / Calm / Linear | Linear | Controls how velocity changes over time. |
Pre-delivery review
- Test pointercancel, window blur, and touch-scroll cancellation.
- Announce completion concisely through aria-live.