# front-progress-bar-webpack-plugin

> Shows the status of the build in percent on the your app page

Latest version **0.1.1** (published 2018-04-24) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install front-progress-bar-webpack-plugin
pnpm add front-progress-bar-webpack-plugin
yarn add front-progress-bar-webpack-plugin
bun add front-progress-bar-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2018-04-24 |
| First published | 2018-04-24 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 64.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Gabdrashitov Rinat |
| Maintainers | grinat |
| Keywords | webpack, plugin, progress |

## Links

- npm: https://www.npmjs.com/package/front-progress-bar-webpack-plugin
- Repository: https://github.com/grinat/front-progress-bar-webpack-plugin
- Homepage: https://github.com/grinat/front-progress-bar-webpack-plugin#readme
- Issues: https://github.com/grinat/front-progress-bar-webpack-plugin/issues
- npm.io page: https://npm.io/package/front-progress-bar-webpack-plugin

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2018-04-24
- 0.1.0 — 2018-04-24

## README

## front-progress-bar-webpack-plugin
Shows the status of the build in percent on the your app page(e.g: index.html). In the case of an update error, it displays an error.
Tested on webpack 3

### Install
```
npm install front-progress-bar-webpack-plugin --save-dev
```

### Usage

1. Put to webpack
```
const FrontProgressBar = require('front-progress-bar-webpack-plugin')

// add to webpack plugins
plugins: [
   ...
   new FrontProgressBar({
     templateProgress: 'index-process.html', // path to template which showed on update
     templateFail: 'index-fail.html',  // path to template which showed on error
     indexFile: 'index.html', // your index file
     errorTag: '{{%error%}}', // tag which replaced by errors in index-fail.html
     errorsCount: 3 // showed errros in errorTag
   })
   ...
]
```

2. Prepare templates

index-process.html

```
<!DOCTYPE html>
<html lang="en">
<body>
<div class="progress-wrapper">
    <div id="progressPercent" style="width:5%;"></div>
</div>
<div id="progressMessage">Preparing...</div>
<style type="text/css">
  .progress-wrapper {
    width: 70%;
    background-color: white;
    height: 20px;
    display: inline-block;;
    border: 1px solid #eee;
    text-align: center;
  }
  #progressPercent {
    height: 100%;
    background-color: green;
    color: white;
  }
</style>
<script>
  // listen percent update
  window.addEventListener('progress.update', function (e) {
    document.getElementById('progressPercent').style.width = e.detail.percent + '%'
    document.getElementById('progressPercent').innerHTML = e.detail.percent + '%'
    document.getElementById('progressMessage').innerHTML = e.detail.message
  })
  // listen on error
  window.addEventListener('progress.error', function (e) {
    document.getElementById('progressMessage').innerHTML = 'Error: ' + e.detail.toString()
  })
</script>
</body>
</html>

```

index-fail.html

```
<!DOCTYPE html>
<html lang="en">
<body>
  <h3>
    Fatal errors:
  </h3>
  <pre>{{%error%}}</pre>
</body>
</html>
```

---
_Source: https://npm.io/package/front-progress-bar-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
