• Home
• com.vaadin.polymer
• vaadin-gwt-polymer-elements
• 1.1.3.0-alpha1
• source code
• README.md

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

com.vaadin.polymer.public.bower_components.paper-progress.README.md Maven / Gradle / Ivy

paper-progress
===================

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:

```html

```

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:

```html

```

### Styling progress bar:

To change the active progress bar color:

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

To change the secondary progress bar color:

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

To change the progress bar background color:

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

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

```css
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