Progress Bars
Visualize progress and percentages.
Overview
Visualize progress and percentages.
Setup
- 1.
Create
Create a Progress Bars widget in your Pliget dashboard.
- 2.
Configure
Add metrics, set values and ranges, then choose a visual style.
- 3.
Publish
Adjust appearance and verify the live preview, then save and publish.
- 4.
Embed
Copy its embed code from the editor and add it to your website.
Capabilities
Progress indicators, labels, calculated percentages and animation.
Configuration checklist
- Enter value, min/max range and labels.
- Choose available bar appearance and motion.
Verify before publishing
- Test zero and out-of-range values.
- Expose percentage as text, not just color.
- Verify published status and that the generated widget ID belongs to the intended site.
- Test the embed on desktop, mobile and an actual external page.
Integrations and connections
These are operational connections and external destinations, not marketing-only recommendations.
The widget uses the standard Pliget script embed. You do not need to build or bundle the widget into your website.
If your widget collects data, review its individual connection options and limits before publishing.
No additional external provider or cross-widget integration is currently documented.
Supported languages
Pliget interface and widget localization options. Auto follows the configured locale behavior; not every content field is automatically translated.
Appearance themes
Available shared widget themes. Individual layouts may have their own material treatment while respecting the selected theme.
Install on your website
- Create the widget in your Pliget dashboard and configure its content and appearance.
- Save and publish it. Drafts are not delivered by the public widget endpoint.
- Copy the embed snippet from the widget editor and place it on the target website.
- Verify the public widget on desktop and mobile. Make sure the site origin and publication settings are correct.
<script async src="https://cdn-dev.pliget.com/widget.js" data-widget="YOUR_PUBLISHED_WIDGET_ID"></script>Illustrative snippet: use the exact generated code and widget ID from your dashboard. Do not reuse another site's ID.
Limitations and prerequisites
Validate range boundaries and provide accessible text alternatives.