Top Related Projects
A really basic thread-safe progress bar for Golang applications
:zap: A Fast, Extensible Progress Bar for Python and CLI
A go library to render progress bars in terminal applications
Console progress bar for Golang
multi progress bar for Go cli applications
Quick Overview
progressbar.js is a lightweight JavaScript library for creating responsive and stylish progress bars. It offers a simple API to create and animate various types of progress bars, including line, circle, and semi-circle shapes. The library is highly customizable and works well with modern web technologies.
Pros
- Lightweight and dependency-free
- Highly customizable with support for custom SVG paths
- Smooth animations and responsive design
- Compatible with both browser and Node.js environments
Cons
- Limited built-in shapes (only line, circle, and semi-circle)
- Requires manual calculation for percentage-based progress
- Documentation could be more comprehensive
- No built-in support for multiple progress bars in a single container
Code Examples
Creating a simple line progress bar:
var ProgressBar = require('progressbar.js');
var bar = new ProgressBar.Line('#container', {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'}
});
bar.animate(0.8); // Number from 0.0 to 1.0
Creating a circular progress bar with custom text:
var circle = new ProgressBar.Circle('#container', {
color: '#FCB03C',
strokeWidth: 6,
trailWidth: 1,
text: {
value: '0%',
style: {
color: '#999',
position: 'absolute',
left: '50%',
top: '50%',
padding: 0,
margin: 0,
transform: {
prefix: true,
value: 'translate(-50%, -50%)'
}
}
},
step: function(state, circle) {
circle.setText((circle.value() * 100).toFixed(0) + '%');
}
});
circle.animate(0.75, {
duration: 2000
});
Creating a custom shape progress bar:
var customPath = new ProgressBar.Path('#heart-path', {
easing: 'easeInOut',
duration: 1400
});
customPath.set(0);
customPath.animate(1.0);
Getting Started
-
Install progressbar.js using npm:
npm install progressbar.js
-
Include the library in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/progressbar.js@1.1.0/dist/progressbar.min.js"></script>
-
Create a container element in your HTML:
<div id="progress-container"></div>
-
Initialize and animate a progress bar in your JavaScript:
var bar = new ProgressBar.Line('#progress-container', { strokeWidth: 4, easing: 'easeInOut', duration: 1400, color: '#FFEA82', trailColor: '#eee', trailWidth: 1, }); bar.animate(0.75); // Set progress to 75%
Competitor Comparisons
A really basic thread-safe progress bar for Golang applications
Pros of progressbar
- Written in Go, offering better performance for backend applications
- Simple and lightweight, with minimal dependencies
- Supports concurrent progress tracking for multiple bars
Cons of progressbar
- Limited customization options compared to progressbar.js
- Lacks advanced animation features
- Primarily designed for command-line interfaces, not web applications
Code Comparison
progressbar.js:
var bar = new ProgressBar.Circle('#container', {
strokeWidth: 6,
easing: 'easeInOut',
duration: 1400,
color: '#ED6A5A',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});
bar.animate(1.0);
progressbar:
bar := progressbar.Default(100)
for i := 0; i < 100; i++ {
bar.Add(1)
time.Sleep(10 * time.Millisecond)
}
progressbar.js is a JavaScript library focused on creating visually appealing progress bars for web applications. It offers extensive customization options and smooth animations. On the other hand, progressbar is a Go library designed for creating simple, text-based progress bars in command-line applications. While progressbar.js excels in web environments with its rich visual features, progressbar shines in backend and CLI applications with its simplicity and performance.
:zap: A Fast, Extensible Progress Bar for Python and CLI
Pros of tqdm
- Supports multiple programming languages (Python, CLI, C/C++, etc.)
- Offers more advanced features like nested progress bars and parallel iteration
- Highly customizable with various output formats and styling options
Cons of tqdm
- Primarily designed for command-line interfaces, less suitable for web applications
- Steeper learning curve due to its extensive feature set
- Requires additional dependencies for some advanced features
Code Comparison
tqdm:
from tqdm import tqdm
for i in tqdm(range(100)):
# do something
pass
progressbar.js:
var bar = new ProgressBar.Line('#container');
bar.animate(1.0); // Number from 0.0 to 1.0
Summary
tqdm is a versatile progress bar library with support for multiple languages and advanced features, making it ideal for command-line applications and data processing tasks. progressbar.js, on the other hand, is more focused on creating visually appealing progress bars for web applications, offering simpler implementation but with fewer advanced features. The choice between the two depends on the specific use case and development environment.
A go library to render progress bars in terminal applications
Pros of uiprogress
- Written in Go, offering better performance for backend applications
- Supports multiple progress bars simultaneously
- Provides more customization options for terminal-based progress displays
Cons of uiprogress
- Limited to terminal/console applications, unlike progressbar.js which works in web browsers
- Less extensive documentation and examples compared to progressbar.js
- Smaller community and fewer contributors, potentially leading to slower development
Code Comparison
progressbar.js:
var bar = new ProgressBar.Circle('#container', {
strokeWidth: 6,
easing: 'easeInOut',
duration: 1400,
color: '#ED6A5A',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});
bar.animate(1.0);
uiprogress:
bar := uiprogress.AddBar(100)
bar.AppendCompleted()
bar.AppendElapsed()
for i := 0; i <= 100; i++ {
bar.Incr()
time.Sleep(time.Millisecond * 20)
}
The code examples highlight the different use cases and languages of the two libraries. progressbar.js focuses on creating visually appealing progress bars for web applications, while uiprogress is designed for creating text-based progress bars in terminal applications.
Console progress bar for Golang
Pros of pb
- Written in Go, offering better performance for command-line applications
- Supports multiple progress bar types (simple, multi, and adaptive)
- Provides more customization options for terminal-based progress bars
Cons of pb
- Limited to terminal/console applications, not suitable for web or GUI
- Less visually appealing compared to progressbar.js's SVG-based animations
- Steeper learning curve for developers not familiar with Go
Code Comparison
pb:
bar := pb.New(100)
bar.Start()
for i := 0; i < 100; i++ {
bar.Increment()
time.Sleep(time.Millisecond * 10)
}
bar.Finish()
progressbar.js:
var bar = new ProgressBar.Line('#container', {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'}
});
bar.animate(1.0);
Summary
pb is a Go-based progress bar library ideal for terminal applications, offering multiple bar types and extensive customization. It excels in performance but is limited to console use. progressbar.js, on the other hand, is a JavaScript library that creates visually appealing SVG-based progress bars, making it suitable for web applications. While pb provides more options for terminal-based progress tracking, progressbar.js offers easier integration and better aesthetics for web projects.
multi progress bar for Go cli applications
Pros of mpb
- Written in Go, offering better performance and concurrency support
- Supports multiple progress bars simultaneously
- Provides more customization options and flexibility
Cons of mpb
- Less widespread adoption compared to progressbar.js
- Requires Go knowledge, limiting accessibility for web developers
- Lacks built-in support for specific visual styles like progressbar.js offers
Code Comparison
progressbar.js:
var bar = new ProgressBar.Circle('#container', {
strokeWidth: 6,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});
bar.animate(1.0);
mpb:
p := mpb.New(mpb.WithWidth(64))
bar := p.AddBar(100,
mpb.PrependDecorators(
decor.Name("MyTask"),
decor.Percentage(decor.WCSyncSpace),
),
mpb.AppendDecorators(
decor.ETA(decor.ET_STYLE_GO),
),
)
The code comparison shows that progressbar.js focuses on creating visually appealing progress bars with ease, while mpb offers more programmatic control and features for complex progress tracking scenarios. progressbar.js is more suitable for web-based applications, whereas mpb is better suited for command-line tools and Go applications requiring advanced progress reporting capabilities.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
ProgressBar.js
Responsive and slick progress bars with animated SVG paths. Use built-in shapes or create your own paths. Customize the animations as you wish.
Documentation is hosted at readthedocs.org.
Shortcuts
- Get started
- Demo & Examples
- Try in JSFiddle
- API documentation
- Migration between versions
- react-progressbar.js progress bars in React.
Contributing
See documentation for contributors.
Thanks
This project is a grateful recipient of the Futurice Open Source sponsorship program.
Top Related Projects
A really basic thread-safe progress bar for Golang applications
:zap: A Fast, Extensible Progress Bar for Python and CLI
A go library to render progress bars in terminal applications
Console progress bar for Golang
multi progress bar for Go cli applications
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot