# @uxland/uxl-progress-indicator

> UXLand - Progress Indicator

Latest version **3.0.4** (published 2020-05-08) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @uxland/uxl-progress-indicator
pnpm add @uxland/uxl-progress-indicator
yarn add @uxland/uxl-progress-indicator
bun add @uxland/uxl-progress-indicator
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.4 |
| Published | 2020-05-08 |
| First published | 2018-08-08 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 18.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | UXLand |
| Maintainers | avizcaino, uxland-admin |
| Keywords | polymer, web components |

## Links

- npm: https://www.npmjs.com/package/@uxland/uxl-progress-indicator
- Repository: https://github.com/uxland/uxl-progress-indicator
- Homepage: https://github.com/uxland/uxl-progress-indicator#readme
- Issues: https://github.com/uxland/uxl-progress-indicator/issues
- npm.io page: https://npm.io/package/@uxland/uxl-progress-indicator

## Dependencies (1)

- [lit-element](https://npm.io/package/lit-element.md) ^2.2.0

## Recent versions

- 3.0.4 (latest) — 2020-05-08
- 3.0.0-beta.2 (beta) — 2019-07-30
- 3.0.3 — 2019-07-31
- 3.0.2 — 2019-07-31
- 3.0.1 — 2019-07-31
- 3.0.0 — 2019-07-31
- 3.0.0-beta.1 — 2019-07-30
- 2.0.0 — 2019-01-24
- 1.0.8 — 2019-01-17
- 1.0.7 — 2018-12-19
- 1.0.6 — 2018-11-08
- 1.0.5 — 2018-11-08
- 1.0.4 — 2018-11-08
- 1.0.3 — 2018-10-10
- 1.0.2 — 2018-09-21
- … 1 more at https://npm.io/package/@uxland/uxl-progress-indicator/versions

## README

# \<uxl-progress-indicator\>

A progress indicator component

[![Build Status](https://travis-ci.org/uxland/uxl-porgress-indicator.svg?branch=master)](https://travis-ci.org/uxland/uxl-progress-indicator)
[![npm version](https://badge.fury.io/js/%40uxland%2Fuxl-progress-indicator.svg)](https://badge.fury.io/js/%40uxland%2Fuxl-progress-indicator)

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

### Description

`<uxl-progress-indicator>` is a component that provides two types of material design based progress indicators with optional message:

- Circular spinner:
- Bouncing balls:

### Options

If you want to personalize, you can use options. These options are typed as UxlProgressIndicatorOptions

1. **type**: _String_ `Specifies the spinner type`

   Possible values: `"spinner", "bouncing"`

   Default value: `"spinner"`

2. **text**: _String_ `Specifies the message of spinner`

   Default value: `undefined`

3. **position**: _String_ `Specifies the position between the spinner and the message`

   Possible values: `"vertical", "horizontal", "vertical-reverse", "horizontal-reverse"`

   Default value: `"vertical"`

4. **fit**: _Boolean_ `Specifies whether the spiner's position is centered fixed in the screen or not`

   Possible values: `"true" or "false"`

   Default value: `"false"`

###Custom CSS properties

`<uxl-progress-indicator>` provides the following custom properties for styling:

| Custom property                               |       Description       |             Default |
| --------------------------------------------- | :---------------------: | ------------------: |
| --uxl-progress-indicator-spinner-width:       |      spinner width      |                30px |
| --uxl-progress-indicator-spinner-height:      |     spinner height      |                30px |
| --uxl-progress-indicator-spinner-stroke       |     spinner stroke      |                 3px |
| --uxl-progress-indicator-color                |  Color of the spinner   |             #009688 |
| --uxl-progress-indicator-background-color     |    background color     |         transparent |
| --uxl-progress-indicator-bouncing-ball-width  |  bouncing balls width   |                10px |
| --uxl-progress-indicator-bouncing-ball-height |  bouncing balls width   |                10px |
| --uxl-progress-indicator-title-color          | font color for message  | rgba(0, 0, 0, 0.87) |
| --uxl-progress-indicator-title-size           |  font size for message  |                1rem |
| --uxl-progress-indicator-title-weight         | font weight for message |               light |

###Demo

You can see the demos:

url: `localhost/components/uxl-progress-indicator/demo/index.html`

---
_Source: https://npm.io/package/@uxland/uxl-progress-indicator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._