Polymer 2.0, custom web component, Interactive progress with different types of responsive indicators, highly customizable and visually appealing.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
test
.gitignore
.travis.yaml
CONTRIBUTING.md
LICENSE
README.md
bower.json
index.html
package.json
pf-progress-slider.html
polymer.json

README.md

pf-elements

A Polymer 2.0 based collection of reusable web components

Join the chat at https://gitter.im/pf-elements/Lobby

Published on webcomponents.org

Demo

Click here for docs & demo

Element Name Latest Version (Bower) Npm version Build Status
pf-progress-slider GitHub version npm version Build Status

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your application locally.


A composite component

<pf-progress-slider></pf-progress-slider> Use this element to track the progress of the user, this can be made interactive as well and user can go back to a certain step and submit the progress again, progress bar will update the progress status with the right indication(color).

Horizontal Example

 <pf-progress-slider steps="55">

</pf-progress-slider>

Vertical Example

 <pf-progress-slider vertical steps="70>

</pf-progress-slider>

Customization and usage

This element can be customized in a number of ways

Events

Custom Event Description
position-changed This event is Fired when position is changed

Methods

The following methods are available for crude events operation:

Methods Description
setCurrentPos(value) Sets the current position of the slider to the given value
getCurrentPos() Returns current value
setPosState(state, step) Sets the state of the given step e.g. set step 3 as pass

Styling

The following custom properties and mixins are available for styling:

Custom property Description Default
--pf-default-bar-color Default color of bar silver
--pf-pass-bar-color Passed color of bar 27ae60
--pf-fail-bar-color Failed color of bar e74c3c
--pf-skip-bar-color Skipped color of bar 3498db

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your application locally.

Viewing Your Application

$ polymer serve

Building Your Application

$ polymer build

This will create a build/ folder with bundled/ and unbundled/ sub-folders containing a bundled (Vulcanized) and unbundled builds, both run through HTML, CSS, and JS optimizers.

You can serve the built versions by giving polymer serve a folder to serve from:

$ polymer serve build/bundled

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

Learn more

See the list of elements, demos, and documentation by browsing this collection on webcomponents.org:

Go to webcomponents.org


Contributing

Comments, questions, suggestions, issues, and pull requests are all welcome.

Get in touch with the team

Joing us at Join the chat at https://gitter.im/pf-elements/Lobby

Some ways to help:

  • Test the elements and provide feedback: We would love to hear your feedback on anything related to the elements, like features, API and design. The best way to start is by trying them out. And to get a quick response, either drop a question/comment on the chat or open an issue in GitHub.
  • Report bugs: File issues for the elements in their respective GitHub projects.
  • Send pull requests: If you want to contribute code, check out the development instructions below.

We encourage you to read the contribution instructions by GitHub also.

License

MIT License