Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A Polymer 2.0 based collection of reusable web components

Join the chat at

Published on


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">


Vertical Example

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


Customization and usage

This element can be customized in a number of ways


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


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


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

Go to


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

Get in touch with the team

Joing us at Join the chat at

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.


MIT License


Polymer 2.0, custom web component, Interactive progress with different types of responsive indicators, highly customizable and visually appealing.







No packages published