13:I[37568,["/_next/static/immutable/chunks/2-9vr-e42s8dr.js","/_next/static/immutable/chunks/2_omr-qreewwb.js","/_next/static/immutable/chunks/01f2nfogzffw7.js","/_next/static/immutable/chunks/3k56s_r4mk904.js","/_next/static/immutable/chunks/1s6zm_s8-c7ni.js","/_next/static/immutable/chunks/181_42an756jy.js","/_next/static/immutable/chunks/1jihvr95juttv.js","/_next/static/immutable/chunks/092nngb_-as9i.js","/_next/static/immutable/chunks/1j32oyta3515h.js"],"Playground"] 12:T416,{"@context":"https://schema.org","@graph":[{"@type":"SoftwareSourceCode","@id":"https://trytweenly.vercel.app/docs/components/download-button#code","name":"Download Button","description":"Button that morphs from Download to a live progress fill and a drawn check mark.","url":"https://trytweenly.vercel.app/docs/components/download-button","codeRepository":"https://github.com/mirukullacode/tweenly","programmingLanguage":[{"@type":"ComputerLanguage","name":"TypeScript"},{"@type":"ComputerLanguage","name":"React"}],"runtimePlatform":"React","keywords":"Feedback, react, shadcn, animation","isPartOf":{"@type":"WebSite","name":"tweenly","url":"https://trytweenly.vercel.app"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Docs","item":"https://trytweenly.vercel.app/docs"},{"@type":"ListItem","position":2,"name":"Components","item":"https://trytweenly.vercel.app/docs"},{"@type":"ListItem","position":3,"name":"Download Button","item":"https://trytweenly.vercel.app/docs/components/download-button"}]}]}14:T16bb,"use client" import { useEffect, useRef, useState } from "react" import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react" import { cn } from "@/lib/utils" type State = "idle" | "loading" | "done" export interface DownloadButtonProps extends Omit, "onClick" | "children"> { /** File to download. Triggered once the animation completes. */ href?: string /** Suggested file name for `href`. */ fileName?: string /** Run your own download. The progress bar waits for the promise. */ onDownload?: () => Promise | void /** Controlled progress, 0 to 100. When set, the bar follows it instead of simulating. */ progress?: number /** Length of the simulated progress, in seconds. Default: 2 */ duration?: number /** Return to idle this many ms after finishing (0 = stay done). Default: 2200 */ resetAfter?: number /** Idle label. Default: "Download" */ label?: string /** Finished label. Default: "Downloaded" */ doneLabel?: string /** Show the percentage while loading. Default: true */ showPercent?: boolean /** Progress fill color (any CSS color). Default: 25% of the background color */ fillColor?: string } const Arrow = () => ( ) const Check = () => ( ) export function DownloadButton({ href, fileName, onDownload, progress, duration = 2, resetAfter = 2200, label = "Download", doneLabel = "Downloaded", showPercent = true, fillColor = "color-mix(in oklab, var(--background) 25%, transparent)", className, disabled, ...props }: DownloadButtonProps) { const reduced = useReducedMotion() const [state, setState] = useState("idle") const value = useMotionValue(0) const width = useTransform(value, (v) => `${v}%`) const percent = useTransform(value, (v) => `${Math.round(v)}%`) const resetTimer = useRef>(undefined) const finish = () => { setState("done") if (href) { const a = document.createElement("a") a.href = href a.download = fileName ?? "" a.click() } if (resetAfter > 0) { resetTimer.current = setTimeout(() => { setState("idle") value.set(0) }, resetAfter) } } // Controlled mode: follow the `progress` prop useEffect(() => { if (progress === undefined || state !== "loading") return const controls = animate(value, Math.min(Math.max(progress, 0), 100), { duration: 0.3 }) if (progress >= 100) controls.then(() => finish()) return () => controls.stop() // eslint-disable-next-line react-hooks/exhaustive-deps }, [progress, state]) useEffect(() => () => clearTimeout(resetTimer.current), []) const start = async () => { if (state !== "idle") return setState("loading") value.set(0) if (progress !== undefined) return // parent drives progress const task = Promise.resolve(onDownload?.()) // Simulated bar eases toward 90% until the task settles, then completes const sim = animate(value, 90, { duration: reduced ? 0 : duration, ease: [0.3, 0.8, 0.4, 1] }) await Promise.all([task, sim.then(() => undefined)]).catch(() => undefined) await animate(value, 100, { duration: reduced ? 0 : 0.25 }) finish() } return ( ) } 7:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$12"}}],["$","$L13",null,{"slug":"download-button","source":"$14"}]]