# @belomx/timeu-wizard > A wizard design-style for easy use Latest version **1.7.14** (published 2021-02-03) · MIT license · 0 weekly downloads ## Install ```sh npm install @belomx/timeu-wizard pnpm add @belomx/timeu-wizard yarn add @belomx/timeu-wizard bun add @belomx/timeu-wizard ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.7.14 | | Published | 2021-02-03 | | First published | 2020-10-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 14 | | Unpacked size | 40.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Belomx | | Maintainers | belomx | | Keywords | web-component, web-components, polymer, slider | ## Links - npm: https://www.npmjs.com/package/@belomx/timeu-wizard - Repository: https://github.com/belomx/timeu-wizard - Homepage: https://github.com/belomx/timeu-wizard/ - Issues: https://github.com/belomx/timeu-wizard/issues - npm.io page: https://npm.io/package/@belomx/timeu-wizard ## Dependencies (14) - [lit-fontawesome](https://npm.io/package/lit-fontawesome.md) ^0.1.3 - [@polymer/polymer](https://npm.io/package/@polymer/polymer.md) ^3.0.0 - [fontawesome-icon](https://npm.io/package/fontawesome-icon.md) ^1.0.4 - [paper-range-slider](https://npm.io/package/paper-range-slider.md) ^3.0.0 - [@polymer/paper-input](https://npm.io/package/@polymer/paper-input.md) ^3.0.0-pre.18 - [@polymer/paper-styles](https://npm.io/package/@polymer/paper-styles.md) ^3.0.0-pre.18 - [@polymer/iron-behaviors](https://npm.io/package/@polymer/iron-behaviors.md) ^3.0.0-pre.18 - [@polymer/paper-progress](https://npm.io/package/@polymer/paper-progress.md) ^3.0.0-pre.18 - [@polymer/paper-behaviors](https://npm.io/package/@polymer/paper-behaviors.md) ^3.0.0-pre.18 - [@polymer/iron-flex-layout](https://npm.io/package/@polymer/iron-flex-layout.md) ^3.0.0-pre.18 - [@fortawesome/fontawesome-free](https://npm.io/package/@fortawesome/fontawesome-free.md) ^5.15.0 - [@webcomponents/webcomponentsjs](https://npm.io/package/@webcomponents/webcomponentsjs.md) ^2.0.0 - [@polymer/iron-a11y-keys-behavior](https://npm.io/package/@polymer/iron-a11y-keys-behavior.md) ^3.0.0-pre.18 - [@polymer/iron-form-element-behavior](https://npm.io/package/@polymer/iron-form-element-behavior.md) ^3.0.0-pre.18 ## Alternatives - [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads - [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads - [better](https://npm.io/package/better.md) — 42 weekly downloads - [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads - [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads ## Recent versions - 1.7.14 (latest) — 2021-02-03 - 1.7.13 — 2021-02-01 - 1.7.12 — 2021-01-31 - 1.7.11 — 2021-01-31 - 1.7.10 — 2021-01-31 - 1.7.9 — 2021-01-29 - 1.7.8 — 2021-01-29 - 1.7.7 — 2021-01-28 - 1.7.6 — 2020-10-29 - 1.7.5 — 2020-10-29 - 1.7.4 — 2020-10-03 - 1.7.3 — 2020-10-03 ## README _[Demo and API Docs](https://www.webcomponents.org/element/belomx/timeu-wizard)_ ## <timeu-wizard> The `timeu-wizard` element displaying the progress of a wizard as a series of connected circles. By default the step number is displayed inside the circle and if provided a label below. The available steps are provided by either as an `array` of `Objects` or an `array` of `Strings`. **This branch (master) works only with Polymer 3.x. ** ## Versions (Polymer 3.x) The *master* branch and all *3.x.x* . ## How to use Simple example: --> ```html ``` By providing an `array` of `Objects` users can provide custom contents for the circles. Example with custom circle content: ```html ``` It is also possible to display a vertical progress by adding the `vertical` attribute: ```html ``` ### Styling The following custom properties and mixins are also available for styling: Custom property | Description | Default ----------------|-------------|---------- `--timeu-wizard-line-color` | The color of the line | `#dfdfdf` `--timeu-wizard-line-size` | The thickness of the line | `1px` `--timeu-wizard-line-filling-color` | The color of the of the line when is filled | `#2db36f` `--timeu-wizard-circle-size` | The size of the circle | `40px` `--timeu-wizard-filling-color` | The collor of the filling of the line | `#2db36f` `--timeu-wizard-anim-speed` | The animation speed for the circles and lines | `0.5s` `--timeu-wizard-active-color` | The color of finished steps and the current active step | `#2db36f` `--timeu-wizard-label-font-size` | The font-size of the labels | `13px` `--timeu-wizard-step-font-size` | The font-size of the steps inside of the circle | `25px` `--timeu-wizard-circle-border-size` | The thickness of the circle border | `1px` `--timeu-wizard` | Mixin applied to element host | {} `--timeu-wizard-container` | Mixin applied to container div | {} `--timeu-wizard-list` | Mixin applied to steps list | {} `--timeu-wizard-list-item` | Mixin applied to each step | {} `--timeu-wizard-list-item-active` | Mixin applied to each active step | {} `--timeu-wizard-list-item-done` | Mixin applied to each done step | {} `--timeu-wizard-list-item-icon` | Mixin applied to each step icon | {} `--timeu-wizard-list-item-checkicon` | Mixin applied to each done step icon | {} `--timeu-wizard-list-item-label` | Mixin applied to each item label | {} `--timeu-wizard-list-item-right-label` | Mixin applied to each item right label | {} `--timeu-wizard-list-item-left-label` | Mixin applied to each item left label | {} --- _Source: https://npm.io/package/@belomx/timeu-wizard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._