A
V
Progress Bar
Monitor Your Downloads & Processes
The Progress Bar component provides a visual indicator to represent the completion status of a task in real-time. It enhances the user experience by displaying the progress of ongoing processes such as file uploads, downloads, form submissions, or data loading.
Why Use Progress Bars?
- Visual Feedback: Keep users informed about ongoing processes with clear progress indicators.
- Custom Styles: Adapt progress bars with different colors, sizes, and animations.
- Real-Time Updates: Dynamically adjust progress as tasks complete in the background.
- Multi-Step Support: Show step-by-step completion for multi-stage processes like form submissions.
- Responsive Design: Optimized for mobile and desktop experiences.
Simple Progress Bar
The Simple Progress Bar is a minimalist and effective visual indicator used to represent the progress of a task such as file downloads, form submissions, or loading processes. It provides real-time feedback to users, enhancing usability and engagement.
<div class="DyFx Ht20 OwHn FtSe8 CrBdWe80Lt BrRs10">
<div class="DyFx FxDnCn FxJyCtCr CrWe TtAnCr CrBdTe50Lt Wh0p" role="progressbar" data-valuenow="0" data-valuemin="0" data-valuemax="100"></div>
</div>
<div class="DyFx Ht20 OwHn FtSe8 CrBdWe80Lt BrRs10">
<div class="DyFx FxDnCn FxJyCtCr CrWe TtAnCr CrBdTe50Lt Wh25p" role="progressbar" data-valuenow="25" data-valuemin="0" data-valuemax="100"></div>
</div>
<div class="DyFx Ht20 OwHn FtSe8 CrBdWe80Lt BrRs10">
<div class="DyFx FxDnCn FxJyCtCr CrWe TtAnCr CrBdTe50Lt Wh50p" role="progressbar" data-valuenow="50" data-valuemin="0" data-valuemax="100"></div>
</div>
<div class="DyFx Ht20 OwHn FtSe8 CrBdWe80Lt BrRs10">
<div class="DyFx FxDnCn FxJyCtCr CrWe TtAnCr CrBdTe50Lt Wh75p" role="progressbar" data-valuenow="75" data-valuemin="0" data-valuemax="100"></div>
</div>
<div class="DyFx Ht20 OwHn FtSe8 CrBdWe80Lt BrRs10">
<div class="DyFx FxDnCn FxJyCtCr CrWe TtAnCr CrBdTe50Lt Wh100p" role="progressbar" data-valuenow="100" data-valuemin="0" data-valuemax="100"></div>
</div>
Colorful Progress Bar
The Colorful Progress Bar is a visually rich component designed to enhance user interaction by using dynamic colors and smooth animations to indicate the progress of ongoing tasks such as downloads, uploads, or loading operations. It draws attention and keeps users informed in an aesthetically pleasing way.
<div class="DyFx Ht20 OwHn FtSe8 CrBdWe80Lt BrRs10">
<div class="DyFx FxDnCn FxJyCtCr CrWe TtAnCr CrBdTe50Lt Wh0p" role="progressbar" data-valuenow="0" data-valuemin="0" data-valuemax="100"></div>
</div>
<div class="DyFx Ht20 OwHn FtSe8 CrBdWe80Lt BrRs10">
<div class="DyFx FxDnCn FxJyCtCr CrWe TtAnCr CrBdRd Wh25p" role="progressbar" data-valuenow="25" data-valuemin="0" data-valuemax="100"></div>
</div>
<div class="DyFx Ht20 OwHn FtSe8 CrBdWe80Lt BrRs10">
<div class="DyFx FxDnCn FxJyCtCr CrWe TtAnCr CrBdGn Wh50p" role="progressbar" data-valuenow="50" data-valuemin="0" data-valuemax="100"></div>
</div>
<div class="DyFx Ht20 OwHn FtSe8 CrBdWe80Lt BrRs10">
<div class="DyFx FxDnCn FxJyCtCr CrWe TtAnCr CrBdBe Wh75p" role="progressbar" data-valuenow="75" data-valuemin="0" data-valuemax="100"></div>
</div>
<div class="DyFx Ht20 OwHn FtSe8 CrBdWe80Lt BrRs10">
<div class="DyFx FxDnCn FxJyCtCr CrWe TtAnCr CrBdYw Wh100p" role="progressbar" data-valuenow="100" data-valuemin="0" data-valuemax="100"></div>
</div>
Dynamic Progress Bar
The Dynamic Progress Bar is an interactive UI element used to provide real-time feedback on the status of tasks such as uploads, downloads, or background processes. It updates live as progress is made, keeping users informed and engaged.
Key Features
- Live Updates: Reflects real-time task progress.
- Smooth Transitions: Animates changes in progress.
- Flexible Integration: Easily hooked to APIs, timers, or events.
- Custom Styling: Supports theming via classes or inline styles.
- Responsive Design: Adapts to various screen sizes and containers.
<div id="myProgressBar" class="DyFx Ht20 OwHn FtSe8 CrBdWe80Lt BrRs10"> <div class="DyFx FxDnCn FxJyCtCr FxAnIsCr CrWe TtAnCr CrBdTe50Lt Wh0p" role="progressbar"></div> </div>let inter = null; let obj = { id: 'myProgressBar', onFinish: () => { console.log('Progress Completed'); clearInterval(inter); } } document.addEventListener('DOMContentLoaded', function () { // you will get a function to update progress bar const updateProgress = CT.CePsBr(obj); let value = 0; // number [0 to 100] inter = setInterval(() => { updateProgress(value); value += 1; }, 1000); });