colored-progress-bar-webpack-plugin

    1.2.4 • Public • Published

    Serialif


    Colored Progress Bar Webpack Plugin

    A customizable progress bar plugin for Webpack

    Webpack


    Colored Progress Bar Webpack Plugin example


    Features

    • No dependencies
    • Show only the elements you want
    • Modify color for whole bar or for each element separately
    • Modify size of the progress bar up to the maximum size available on the line
    • Modify characters of the bar (complete and incomplete)
    • Hide cursor during progression
    • Play the default notification sound when compilation is complete. Very useful in watch mode. Currently, this feature is only available for Windows 10 users.

    Installation

    npm install -D colored-progress-bar-webpack-plugin
    
    yarn add -D colored-progress-bar-webpack-plugin
    

    Usage

    Include the following in your Webpack config.

      const ColoredProgressBar = require('colored-progress-bar-webpack-plugin');
      
      plugins: [
          new ColoredProgressBar()
      ]

    Elements

    The progress bar is made up of 5 elements on 2 lines.

    First row

    • Status : compilation status
    • Bar : the bar itself
    • Percent : percentage of progression
    • Message : summary of the action the compiler performs

    Second row

    • Detail : action that the compiler performs

    Options

    Elements

    Define the elements to display (boolean)

    • showStatus
    • showBar
    • showPercent
    • showMessage
    • showDetail

    Colors

    Color of the entire progress bar (string)

    • colorAll if you set the color for the whole bar, it will override the elements colors

    Color of each item separately (string)

    • colorStatus
    • colorBar
    • colorPercent
    • colorMessage
    • colorDetail

    Accepts the following values:

    • black
    • red
    • green
    • yellow
    • blue
    • magenta
    • cyan
    • darkGray
    • lightGray
    • lightRed
    • lightGreen
    • lightYellow
    • lightBlue
    • lightMagenta
    • lightCyan
    • white

    Width

    Number of characters of the progress bar (number)

    • width if this exceeds the maximum size available on the line, this value will be automatically reduced

    Characters

    Define the characters used to represent the completed and uncompleted portion of the bar (string)

    • completeChar
    • incompleteChar

    Detail alignment

    Define if the detail text should be aligned with the bar (boolean)

    • alignDetailOnBar

    Cursor

    Define if the cursor should be hidden during compilation (boolean)

    • hideCursor

    Notification sound

    Define if the default notification sound is played when compilation is complete (boolean)

    • notification only available for Windows 10 users

    Default values

        new ColoredProgressBar({
          showStatus: true,
          showBar: true,
          showPercent: true,
          showMessage: true,
          showDetail: true,
        
          colorAll: null,
          colorStatus: 'green',
          colorBar: 'lightCyan',
          colorPercent: 'blue',
          colorMessage: 'lightYellow',
          colorDetail: 'lightMagenta',
        
          width: 100,
          completeChar: '█',
          incompleteChar: '░',
          alignDetailOnBar: true,
          hideCursor: true,
          notification: false,
    })

    License

    MIT

    Install

    npm i colored-progress-bar-webpack-plugin

    DownloadsWeekly Downloads

    178

    Version

    1.2.4

    License

    MIT

    Unpacked Size

    13.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • serialif