html 设计进度条的样式

Posted 2021-05-10

 Styling a Progress Bar
-----------------------


A [Pen](https://codepen.io/harunpehlivan/pen/xJaKQG) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/xJaKQG/license).

	.progress-bar {

	  background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);

	  width: 200px;

	  height: 20px;

	}

	.progress-bar > span {

	  background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);

	  height: 100%;
	  display: block;
	}

	.progress-bar > span[style="width: 100%;"] {

	  background: linear-gradient(to bottom, #ad7, #cee 20%, #7a3 45%, #7a3 55%, #ad7);

	  height: 100%;

	  display: block;

	}
progress[value]  {

	  -webkit-appearance: none;

	  width: 200px;

	  height: 20px;

	  /* remove border in Firefox */

	  border: none;

	  /* IE */

	  color: red;

	}

	/* Chrome */

	progress[value]::-webkit-progress-bar {

	  background-color: #eee;
	progress[value]::-webkit-progress-value {
	  background-color: red;

	}

	progress[value="100"]::-webkit-progress-value  {

	  background-color: green;

	}

	/* Firefox */

	progress[value]::-moz-progress-bar {

	  background-color: red;

	}

	progress[value="100"]::-moz-progress-bar  {

	  background: green;

	}

	/* IE */

	progress[value="100"]  {

	  color: green;

	}

<div class="progress-bar">

	    <span style="width: 80%;">

	</span></div>

	<p>

	</p><div class="progress-bar">

	    <span style="width: 100%;">

	</span></div>