[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fprogress-indicator":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":319,"links":320,"dates":369},"\u002Fexamples\u002Fcomponents\u002Fprogress-indicator","collection","components",true,{"example_count":9,"app_count":10},347,172,{"id":12,"title":13,"description":14},213,"Progress indicator","See how interfaces communicate progress through a task or process. Explore how bars, labels, and completion states present what is finished and what remains.",{"title":16,"description":17,"og_image":18},"Progress indicator UI examples - Nicelydone","Progress indicator UI design examples from SaaS apps. See how interfaces communicate progress through a task or process. Explore how bars, labels, and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb1edef9b-6d36-409b-b6ae-ce1e6918bc75.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Progress indicator UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Progress indicator UI design examples from SaaS apps. See how interfaces communicate progress through a task or process. Explore how bars, labels, and completion states present what is finished and what remains.",[32],{"title":33,"description":14,"links":34},"About Progress indicator",[],[36],"347 UI components",[38,72,102,122,140,165,192,211,232,255,275,298],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"ed29ec6d-a850-4dc7-bf15-d466f021a082","Steel UI component","A dashboard displaying monthly usage statistics and billing information.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fcomponents",2627,658,"UI component from Steel","component",[48],{"id":12,"title":13,"slug":49},"progress-indicator",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[56,60,64,68],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},37,"Developer APIs","developer-apis",{"id":69,"title":70,"slug":71},45,"Open Source","open-source",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"7d509bb5-1863-407e-9725-85228e28acb6","Zaro UI component","A user interface for creating a workspace, showing the first step of a multi-step process with a progress bar and a back navigation option.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1371f9b3-3b1c-40bb-9ea1-cd6f3542f4cf.png",1391,402,"UI component from Zaro",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[89,93,94,98],{"id":90,"title":91,"slug":92},23,"Collaboration","collaboration",{"id":61,"title":62,"slug":63},{"id":95,"title":96,"slug":97},22,"Knowledge Management","knowledge-management",{"id":99,"title":100,"slug":101},46,"Analytics","analytics",{"uuid":103,"title":104,"description":105,"canonical_path":106,"image":107,"width":108,"height":9,"image_alt":109,"kind":46,"categories":110,"app":112},"06fd427c-3324-49c0-88a3-1cc218f1c3ba","Riverside UI component","A dark mode interface showing a progress indicator and navigation buttons for a multi-step process.","\u002Fexamples\u002Fapps\u002Friverside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F44b49b1e-2ecc-45ec-a352-93738924597d.png",1481,"UI component from Riverside",[111],{"id":12,"title":13,"slug":49},{"slug":113,"title":114,"logo":115,"baseline":116,"categories":117},"riverside","Riverside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcc94468d-7b59-49b7-b969-3aee258a2348.png","HD podcast and video recording and editing software",[118],{"id":119,"title":120,"slug":121},100,"Video","video",{"uuid":123,"title":124,"description":125,"canonical_path":126,"image":127,"width":128,"height":129,"image_alt":130,"kind":46,"categories":131,"app":133},"9c86b9f5-4581-4003-a2ea-ad28f0f0107f","Visitors UI component","A minimalist header with a logo, progress indicator, and user avatar.","\u002Fexamples\u002Fapps\u002Fvisitors\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F79bab0d1-d56c-4ebf-ab3b-84d505db793e.png",1717,317,"UI component from Visitors",[132],{"id":12,"title":13,"slug":49},{"slug":134,"title":135,"logo":136,"baseline":137,"categories":138},"visitors","Visitors","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fba53672a-9799-4a87-8187-a0b0c0766b64.png","Revenue-first web analytics",[139],{"id":99,"title":100,"slug":101},{"uuid":141,"title":142,"canonical_path":143,"image":144,"width":145,"height":146,"image_alt":147,"kind":46,"categories":148,"app":150},"3b4a81b6-ee39-4050-b4fd-c018a8995dd0","Voiceflow UI component","\u002Fexamples\u002Fapps\u002Fvoiceflow\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F123b27e7-61b9-41a8-bee6-e9a6a66f3ce7.png",2107,303,"UI component from Voiceflow",[149],{"id":12,"title":13,"slug":49},{"slug":151,"title":152,"logo":153,"baseline":154,"categories":155},"voiceflow","Voiceflow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fvoiceflow-ba430e40.png","Build amazing conversational assistants",[156,157,161],{"id":61,"title":62,"slug":63},{"id":158,"title":159,"slug":160},47,"Customer Service","customer-service",{"id":162,"title":163,"slug":164},96,"No code","no-code",{"uuid":166,"title":167,"description":168,"canonical_path":169,"image":170,"width":171,"height":172,"image_alt":173,"kind":46,"categories":174,"app":176},"9b7e83ca-8308-4e9e-80de-bb538d1e6266","Onboarding questionnaire step","Displays branding, progress stepper, call profile action and current question in an onboarding flow","\u002Fexamples\u002Fapps\u002Fbeside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd0e4528c-f1e1-4f68-8d93-12d3d8b98da9.png",1056,708,"Onboarding questionnaire step from Beside",[175],{"id":12,"title":13,"slug":49},{"slug":177,"title":178,"logo":179,"baseline":180,"categories":181},"beside","Beside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F8c14025e-58b4-4801-bd91-3e31a3cf8f21.png","AI-powered business phone assistant that answers calls and takes action",[182,183,184,188],{"id":61,"title":62,"slug":63},{"id":158,"title":159,"slug":160},{"id":185,"title":186,"slug":187},53,"CRM","crm",{"id":189,"title":190,"slug":191},82,"Communication","communication",{"uuid":193,"title":194,"description":195,"canonical_path":196,"image":197,"width":198,"height":199,"image_alt":200,"kind":46,"categories":201,"app":203},"70c65726-778a-4a22-84bd-155a71d4d9cf","Onboarding checklist card","Shows progress and checklist of onboarding tasks for new users on the home screen.","\u002Fexamples\u002Fapps\u002Fheygen\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F98f90da3-fb23-4a32-a73a-d7a1df79d9ab.png",483,394,"Onboarding checklist card from HeyGen",[202],{"id":12,"title":13,"slug":49},{"slug":204,"title":205,"logo":206,"baseline":207,"categories":208},"heygen","HeyGen","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd8cda81f-5b21-444e-8401-676a6cf2f817.png","AI video generator that turns ideas into professional videos in minutes",[209,210],{"id":119,"title":120,"slug":121},{"id":61,"title":62,"slug":63},{"uuid":212,"title":213,"description":214,"canonical_path":215,"image":216,"width":217,"height":218,"image_alt":219,"kind":46,"categories":220,"app":222},"b918aaad-a8b1-4f5a-92ff-c275799b6535","Top categories card","Displays top spending categories with amounts, icons, and budget progress bars","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F437323f4-1777-45a6-94a3-acc76e4649c5.png",1445,579,"Top categories card from Copilot",[221],{"id":12,"title":13,"slug":49},{"slug":223,"title":224,"logo":225,"baseline":226,"categories":227},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[228],{"id":229,"title":230,"slug":231},36,"Finance","finance",{"uuid":233,"title":234,"description":235,"canonical_path":236,"image":237,"width":238,"height":239,"image_alt":240,"kind":46,"categories":241,"app":243},"2462b58d-95af-4bbd-89e7-bcbf0ae0e38f","Billing Plan Card","Displays current subscription plan status, trial details, payment method, and credit balance usage.","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fabf06302-4bb5-4eb2-a7ba-4e23c82aa25e.png",2056,727,"Billing Plan Card from Exa",[242],{"id":12,"title":13,"slug":49},{"slug":244,"title":245,"logo":246,"baseline":247,"categories":248},"exa","Exa","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F011e446a-087b-451e-b27d-63d67d92a42f.png","Real-time AI search engine with structured web search API and deep research tools",[249,253,254],{"id":250,"title":251,"slug":252},55,"Search engine","search-engine",{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"uuid":256,"title":257,"description":258,"canonical_path":259,"image":260,"width":261,"height":262,"image_alt":263,"kind":46,"categories":264,"app":266},"5fc27085-72ab-45fe-ae76-226fe89a17ba","Usage card","Displays account usage metrics with upgrade action","\u002Fexamples\u002Fapps\u002Fbrowserbase\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F96e437fc-1bb2-4448-8d35-80c14decbdaf.png",551,557,"Usage card from Browserbase",[265],{"id":12,"title":13,"slug":49},{"slug":267,"title":268,"logo":269,"baseline":270,"categories":271},"browserbase","Browserbase","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F3a57506b-6fe4-4f0c-85bc-b70ea12d0216.png","Give your agents access to the whole web.",[272,273,274],{"id":57,"title":58,"slug":59},{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"uuid":276,"title":277,"description":278,"canonical_path":279,"image":280,"width":281,"height":282,"image_alt":283,"kind":46,"categories":284,"app":286},"e8962cc8-5c31-4b54-be9c-bfbd614e906c","Flora UI component","A user interface displaying editor seat allocation with a quantity selector.","\u002Fexamples\u002Fapps\u002Fflora\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd032a638-86ff-490f-9ef8-b1fd629fe8fe.png",618,432,"UI component from Flora",[285],{"id":12,"title":13,"slug":49},{"slug":287,"title":288,"logo":289,"baseline":290,"categories":291},"flora","Flora","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F5c3c6f99-7e88-4853-9e21-6fd175f2aa62.png","Your creative environement",[292,293,297],{"id":61,"title":62,"slug":63},{"id":294,"title":295,"slug":296},8,"Design","design",{"id":90,"title":91,"slug":92},{"uuid":299,"title":300,"description":301,"canonical_path":302,"image":303,"width":304,"height":305,"image_alt":306,"kind":46,"categories":307,"app":309},"f0af5a90-f86b-47ce-9b1e-751d31aad4f9","Aboard UI component","A card displaying profile completion status with a progress bar and a call to action.","\u002Fexamples\u002Fapps\u002Faboard\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F54e62b59-8a2d-489d-8038-5996be2f68e5.png",747,541,"UI component from Aboard",[308],{"id":12,"title":13,"slug":49},{"slug":310,"title":311,"logo":312,"baseline":313,"categories":314},"aboard","Aboard","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fea3ae2e7-7419-4926-acae-b179668f6172.png","Bring joy to your workplace with Aboard",[315],{"id":316,"title":317,"slug":318},10,"Human resources","human-resources",[],[321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366],{"label":322,"to":323},"Onboarding Checklist","\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":325,"to":326},"Billing Settings","\u002Fexamples\u002Fscreens\u002Fbilling-settings",{"label":328,"to":329},"AI Agent","\u002Fexamples\u002Fscreens\u002Fai-agent",{"label":331,"to":332},"Getting Started","\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":334,"to":335},"Steel design examples","\u002Fexamples\u002Fapps\u002Fsteel",{"label":337,"to":338},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":340,"to":341},"Riverside design examples","\u002Fexamples\u002Fapps\u002Friverside",{"label":343,"to":344},"Visitors design examples","\u002Fexamples\u002Fapps\u002Fvisitors",{"label":346,"to":347},"Voiceflow design examples","\u002Fexamples\u002Fapps\u002Fvoiceflow",{"label":349,"to":350},"Beside design examples","\u002Fexamples\u002Fapps\u002Fbeside",{"label":352,"to":353},"HeyGen design examples","\u002Fexamples\u002Fapps\u002Fheygen",{"label":355,"to":356},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"label":358,"to":359},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":361,"to":362},"Browserbase design examples","\u002Fexamples\u002Fapps\u002Fbrowserbase",{"label":364,"to":365},"Flora design examples","\u002Fexamples\u002Fapps\u002Fflora",{"label":367,"to":368},"Aboard design examples","\u002Fexamples\u002Fapps\u002Faboard",{"published_at":370,"updated_at":371},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]