Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Elements
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Elements

Progress Bar

The <salla-progress-bar> web component is used to convey data visually to users. It is also designed to help users quickly interpret numerical data at a glance, and can be customized according to the color and unit of the bar, as well as the unit, value, and textual representation.

Example#

Progress Bar

Usage#

HTML
SASS

Properties#

PropertyAttributeDescriptionTypeDefault
ColorcolorProgress bar color.stringsalla.config.get('theme.color.primary', "#ffd5c4")
DonationdonationPass the Donation object as a JSON string in the following format: {"target_message":null,"target_date":"2023-04-18","target_end_date":"2023-04-18","target_amount":400,"collected_amount":380,"can_donate":true}Donation | stringundefined
HeaderheaderHeader Title that appears before the progress bar.stringundefined
HeightheightSets the height for the wrapper.string"10px"
MessagemessageSubtitle text that comes under the progress bar or instead of it if the target is not set.stringundefined
StrippedstrippedA stripped effect for the progress bar.booleanundefined
TargettargetProgress bar's goal.numberundefined
UnitunitThe unite to be added after the numbers.stringsalla.config.currency().symbol
ValuevalueThe progress so far as of the goal.numberundefined
Modified at 2024-02-20 07:03:51
Previous
Placeholder
Next
Rating Stars