Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom styling progress bar in CSS

Tags:

html

css

I have a progress bar and i want to style it away from default.

I tried bit of things but it didn't work as I expected.

I want to change the background color and border radius of the progress bar.

When I set the background color, it changes from the default blue to green color and not to the color I set.

<progress class="amount-progress" value="60500" max="120000">70 %</progress>

You can see the fiddle.

When i set the background-color the color changes from blue to green which has to change to a different blue.

And i want the progress bar to have a smooth edge.

I did set border-radius but this also didn't work out.

.amount-progress {
  width: 80%;
  margin-left: -11.5%;
  height: 22px;
  background-color: #0091EA;
}
like image 544
Naveen Kumar Avatar asked Feb 17 '17 06:02

Naveen Kumar


1 Answers

You have to work with the kit of HTML5 progress bar.These are currently the entire selectors for styling HTML5 progress bar:

progress {
  /* style rules */
}
progress::-webkit-progress-bar {
  /* style rules */
}
progress::-webkit-progress-value {
  /* style rules */
}
progress::-moz-progress-bar {
  /* style rules */
}

so :

progress {
  border-radius: 7px; 
  width: 80%;
  height: 22px;
  margin-left: -11.5%;
  box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}
progress::-webkit-progress-bar {
  background-color: yellow;
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background-color: blue;
  border-radius: 7px;
  box-shadow: 1px 1px 5px 3px rgba( 255, 0, 0, 0.8 );
}
progress::-moz-progress-bar {
  /* style rules */
}
<progress value="3333" max="10000">33%</progress>

One thing to keep in mind is that there are two types of progress bars: indeterminate and determinate. If you use the above you will be changing the style for both. If you only want to change the style for a determinate bar you can do the below. This is useful if you want to style the indeterminate progress bar different, for example with a rounded spinner or anything like that.

progress {
    display: block;
}

    /* Determinate: */

    progress[value] {
      /* style rules */
    }
    progress[value]::-webkit-progress-bar {
      /* style rules */
    }
    progress[value]::-webkit-progress-value {
      /* style rules */
    }
    progress[value]::-moz-progress-bar {
      /* style rules */
    }

    /* Indeterminate: */

    progress:not([value]) {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-bar {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-value {
      /* style rules */
    }
    progress:not([value])::-moz-progress-bar {
      /* style rules */
    }
<p>Determinate:</p>

<progress value="66" max="100">Determinate</progress>

<p>Indeterminate:</p>

<progress>Indeterminate</progress>
like image 196
Teshtek Avatar answered Oct 13 '22 23:10

Teshtek