mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
111 lines
4.4 KiB
YAML
111 lines
4.4 KiB
YAML
name: "Progress Bar"
|
|
description: "A linear indicator that shows the completion status of a task or process, displaying progress as a filled portion of a horizontal bar."
|
|
category: "Feedback"
|
|
slds_classes:
|
|
root: "slds-progress-bar"
|
|
elements:
|
|
- class: "slds-progress-bar__value"
|
|
description: "The filled portion of the progress bar"
|
|
purpose: "Visual indicator of completion percentage"
|
|
modifiers:
|
|
- class: "slds-progress-bar_x-small"
|
|
description: "Extra small progress bar height"
|
|
usage: "Compact progress indicator"
|
|
- class: "slds-progress-bar_small"
|
|
description: "Small progress bar height"
|
|
usage: "Smaller progress indicator"
|
|
- class: "slds-progress-bar_medium"
|
|
description: "Medium progress bar height (default)"
|
|
usage: "Standard progress bar size"
|
|
- class: "slds-progress-bar_large"
|
|
description: "Large progress bar height"
|
|
usage: "Prominent progress indicator"
|
|
- class: "slds-progress-bar_circular"
|
|
description: "Circular progress bar variant"
|
|
usage: "Alternative circular progress visualization"
|
|
states: []
|
|
variants:
|
|
- name: "Base"
|
|
description: "Standard horizontal progress bar"
|
|
classes:
|
|
- "slds-progress-bar"
|
|
usage_context: "Default progress visualization for linear tasks"
|
|
differences: "Horizontal bar with filled progress indicator"
|
|
lightning_component:
|
|
name: "lightning-progress-bar"
|
|
url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-bar"
|
|
mapping_notes: "Direct mapping - Lightning component implements SLDS progress bar blueprint"
|
|
accessibility:
|
|
keyboard_support:
|
|
- "No specific keyboard interactions required"
|
|
screen_reader:
|
|
- "Progress value announced as percentage"
|
|
- "Progress updates communicated to assistive technology"
|
|
- "Progress bar purpose described through labeling"
|
|
aria_attributes:
|
|
- "role='progressbar' for progress semantic"
|
|
- "aria-valuenow for current progress value"
|
|
- "aria-valuemin='0' for minimum value"
|
|
- "aria-valuemax='100' for maximum value"
|
|
- "aria-label describing the progress task"
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- "To show completion progress of tasks"
|
|
- "For file uploads or downloads"
|
|
- "During multi-step processes"
|
|
- "When users need to understand progress status"
|
|
when_not_to_use:
|
|
- "For indeterminate loading (use spinner instead)"
|
|
- "When progress cannot be measured"
|
|
- "For instant operations"
|
|
best_practices:
|
|
- "Show actual progress percentage when possible"
|
|
- "Update progress smoothly and frequently"
|
|
- "Provide context about what's progressing"
|
|
- "Use appropriate size for the context"
|
|
- "Include text labels for clarity"
|
|
common_mistakes:
|
|
- "Not updating progress frequently enough"
|
|
- "Using progress bars for indeterminate states"
|
|
- "Poor labeling of what's being tracked"
|
|
- "Inconsistent progress reporting"
|
|
code_examples:
|
|
- title: "Basic Progress Bar"
|
|
code: |
|
|
<div class="slds-progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-label="Progress: 25%">
|
|
<span class="slds-progress-bar__value" style="width: 25%;">
|
|
<span class="slds-assistive-text">Progress: 25%</span>
|
|
</span>
|
|
</div>
|
|
- title: "Large Progress Bar"
|
|
code: |
|
|
<div class="slds-progress-bar slds-progress-bar_large" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress: 75%">
|
|
<span class="slds-progress-bar__value" style="width: 75%;">
|
|
<span class="slds-assistive-text">Upload progress: 75%</span>
|
|
</span>
|
|
</div>
|
|
styling_hooks: []
|
|
dependencies:
|
|
css_files:
|
|
- "progress-bar.css"
|
|
javascript: []
|
|
icons: []
|
|
other_components: []
|
|
related_components:
|
|
- name: "Progress Ring"
|
|
relationship: "alternative"
|
|
description: "Circular alternative for progress visualization"
|
|
- name: "Progress Indicator"
|
|
relationship: "similar"
|
|
description: "Step-based progress for multi-step processes"
|
|
- name: "Spinner"
|
|
relationship: "alternative"
|
|
description: "Alternative for indeterminate loading states"
|
|
references:
|
|
official_docs: "https://v1.lightningdesignsystem.com/components/progress-bar/"
|
|
metadata:
|
|
version: "1.0.0"
|
|
last_updated: "2025-11-12"
|
|
review_status: "complete"
|
|
notes: " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
|