Convert Figma logo to code with AI

kimmobrunfeldt logoprogressbar.js

Responsive and slick progress bars

7,785
1,419
7,785
68

Top Related Projects

A really basic thread-safe progress bar for Golang applications

28,316

:zap: A Fast, Extensible Progress Bar for Python and CLI

A go library to render progress bars in terminal applications

3,634

Console progress bar for Golang

2,290

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

  1. Install progressbar.js using npm:

    npm install progressbar.js
    
  2. Include the library in your HTML file:

    <script src="https://cdn.jsdelivr.net/npm/progressbar.js@1.1.0/dist/progressbar.min.js"></script>
    
  3. Create a container element in your HTML:

    <div id="progress-container"></div>
    
  4. 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.

28,316

: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.

3,634

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.

2,290

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

ProgressBar.js


Demo animation


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

Contributing

See documentation for contributors.

Thanks

This project is a grateful recipient of the Futurice Open Source sponsorship program.

NPM DownloadsLast 30 Days