Nerds Publishing Monstrosities

    @polymer/paper-linear-progress

    1.0.7-pre.1 • Public • Published

    Build status

    Demo and API docs

    ##<paper-progress>

    Material design: Progress & activity

    The progress bars are for situations where the percentage completed can be determined. They give users a quick sense of how much longer an operation will take.

    Example:

    <paper-progress value="10"></paper-progress>

    There is also a secondary progress which is useful for displaying intermediate progress, such as the buffer level during a streaming playback progress bar.

    Example:

    <paper-progress value="10" secondary-progress="30"></paper-progress>

    Styling progress bar:

    To change the active progress bar color:

    paper-progress {
       --paper-progress-active-color: #e91e63;
    }

    To change the secondary progress bar color:

    paper-progress {
      --paper-progress-secondary-color: #f8bbd0;
    }

    To change the progress bar background color:

    paper-progress {
      --paper-progress-container-color: #64ffda;
    }

    Add the class transiting to a paper-progress to animate the progress bar when the value changed. You can also customize the transition:

    paper-progress {
      --paper-progress-transition-duration: 0.08s;
      --paper-progress-transition-timing-function: ease;
      --paper-progress-transition-transition-delay: 0s;
    }

    The following mixins are available for styling:

    Custom property Description Default
    --paper-progress-container-color Mixin applied to container --google-grey-300
    --paper-progress-transition-duration Duration of the transition 0.008s
    --paper-progress-transition-timing-function The timing function for the transition ease
    --paper-progress-transition-delay delay for the transition 0s
    --paper-progress-active-color The color of the active bar --google-green-500
    --paper-progress-secondary-color The color of the secondary bar --google-green-100
    --paper-progress-disabled-active-color The color of the active bar if disabled --google-grey-500
    --paper-progress-disabled-secondary-color The color of the secondary bar if disabled --google-grey-300
    --paper-progress-height The height of the progress bar 4px

    Install

    npm i @polymer/paper-linear-progress

    DownloadsWeekly Downloads

    7

    Version

    1.0.7-pre.1

    License

    SEE LICENSE IN http://polymer.github.io/LICENSE.txt

    Last publish

    Collaborators

    • aomarks
    • emarquez
    • sorvell
    • bicknellr
    • usergenic
    • polymer-devs
    • azakus
    • kevinpschaaf
    • justinfagnani