Custom colours for f7-progressbar infinite

Aidanas · December 9, 2020, 9:25am

Hi all!
Would anyone know if there is a way of specifying a set of colours to be used by the infinite progress bar? So far I can see that you can either specify a specific colour or multi which uses internally defined colours.

 <f7-progressbar
    infinite
    color="multi"
/>

Is there a way to specify a set of colours to be used? e.g:

 <f7-progressbar
    infinite
    :color="coloursArray"
/>

Or perhaps some global css configuration?

nolimits4web · December 9, 2020, 1:45pm

Only by overwriting these CSS styles in your stylesheet:

github.com

framework7io/framework7/blob/v5/src/core/components/progressbar/progressbar-md.less#L57-L106


@keyframes md-progressbar-infinite-multicolor-bg {
  0% {
    background-color: @green;
  }
  25% {
    background-color: @red;
  }
  50% {
    background-color: @blue;
  }
  75% {
    background-color: @yellow;
  }
}
@keyframes md-progressbar-infinite-multicolor-fill {
  0% {
    transform: scaleX(0);
    background-color: @red;
  }
  24.9% {

This file has been truncated. show original

Aidanas · December 10, 2020, 7:36am

Worked like a charm, thanks a lot!