blocks|key|583636|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|583637|#progressbar+{
++background-color:+black;
++border-radius:+13px;
++/*+(height+of+inner+div)+/+2+%2B+padding+*/
++padding:+3px;
}

#progressbar>div+{
++background-color:+orange;
++width:+40%25;
++/*+Adjust+with+JavaScript+*/
++height:+20px;
++border-radius:+10px;
}|code-block|syntax|javascript|583638|<div+id="progressbar">
++<div></div>
</div>|583639|583640|Fiddle|offset|length|583641|(编辑:更改语法突出显示；将子项选择器更改为子项选择器)|583642|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/vjNpj/2060/^0|0|0|0|0|0|6|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@$L|12|M|13|1|14]]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#progressbar {
  background-color: black;
  border-radius: 13px;
  /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar&gt;div {
  background-color: orange;
  width: 40%;
  /* Adjust with JavaScript */
  height: 20px;
  border-radius: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="progressbar"&gt;
  &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/vjNpj/2060/" rel="noreferrer">Fiddle</a></p>

<p>(EDIT: Changed Syntax highlight; changed descendant to child selector)</p>


blocks|key|799620|text|http://jsfiddle.net/cwZSW/1406/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|799621|​|799622|#progress+{
++++background:+#333;
++++border-radius:+13px;
++++height:+20px;
++++width:+300px;
++++padding:+3px;
}

#progress:after+{
++++content:+'';
++++display:+block;
++++background:+orange;
++++width:+50%25;
++++height:+100%25;
++++border-radius:+9px;
}|code-block|syntax|javascript|799623|<div+id="progress"></div>|799624|799625|entityMap|0|LINK|mutability|MUTABLE|url^0|0|V|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|4]]]]

<p><a href="http://jsfiddle.net/cwZSW/1406/" rel="noreferrer">http://jsfiddle.net/cwZSW/1406/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#progress {
    background: #333;
    border-radius: 13px;
    height: 20px;
    width: 300px;
    padding: 3px;
}

#progress:after {
    content: '';
    display: block;
    background: orange;
    width: 50%;
    height: 100%;
    border-radius: 9px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="progress"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|584218|text|在现代浏览器中，您可以使用进度&+HTML5进度元素！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|584219|​|584220|progress+{
++width:+40%25;
++display:+block;+/*+default:+inline-block+*/
++margin:+2em+auto;
++padding:+3px;
++border:+0+none;
++background:+#444;
++border-radius:+14px;
}
progress::-moz-progress-bar+{
++border-radius:+12px;
++background:+orange;

}
/*+webkit+*/
@media+screen+and+(-webkit-min-device-pixel-ratio:0)+{
++progress+{
++++height:+25px;
++}
}
progress::-webkit-progress-bar+{
++++background:+transparent;
}++
progress::-webkit-progress-value+{++
++border-radius:+12px;
++background:+orange;
}+|code-block|syntax|javascript|584221|<progress+max="100"+value="40"></progress>|584222|584223|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>In modern browsers you could use a CSS3 &amp; HTML5 progress Element!</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>progress {
  width: 40%;
  display: block; /* default: inline-block */
  margin: 2em auto;
  padding: 3px;
  border: 0 none;
  background: #444;
  border-radius: 14px;
}
progress::-moz-progress-bar {
  border-radius: 12px;
  background: orange;

}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  progress {
    height: 25px;
  }
}
progress::-webkit-progress-bar {
    background: transparent;
}  
progress::-webkit-progress-value {  
  border-radius: 12px;
  background: orange;
} </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;progress max="100" value="40"&gt;&lt;/progress&gt;</code></pre>
</div>
</div>
</p>


blocks|key|799903|text|与@RoToRa的答案相同，但有一些细微的调整(正确的颜色和尺寸)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|799904|​|799905|body+{
++background-color:+#636363;
++padding:+1em;
}

#progressbar+{
++background-color:+#20201F;
++border-radius:+20px;+/*+(heightOfInnerDiv+/+2)+%2B+padding+*/
++padding:+4px;
}

#progressbar>div+{
++background-color:+#F7901E;
++width:+48%25;
++/*+Adjust+with+JavaScript+*/
++height:+16px;
++border-radius:+10px;
}|code-block|syntax|javascript|799906|<div+id="progressbar">
++<div></div>
</div>|799907|799908|这就是问题所在：jsFiddle|offset|length|799909|下面是它看起来的样子：|799910|📷|atomic|799911|799912|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/2o4vh3es/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/60ba58f3835eedff3c01cdd0ce91d00a.png|imageAlt^0|0|0|0|0|0|8|8|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1E|8|@]|9|@$N|1F|O|1G|1|1H]]|A|$]]|$1|P|3|Q|5|6|7|1I|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1J|8|@]|9|@$N|1K|O|1L|1|1M]]|A|$]]|$1|U|3|C|5|6|7|1N|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|14|Z|15|A|$16|17|18|-4]]]]

<p>Same as @RoToRa's answer, with a some slight adjustments (correct colors and dimensions):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background-color: #636363;
  padding: 1em;
}

#progressbar {
  background-color: #20201F;
  border-radius: 20px; /* (heightOfInnerDiv / 2) + padding */
  padding: 4px;
}

#progressbar&gt;div {
  background-color: #F7901E;
  width: 48%;
  /* Adjust with JavaScript */
  height: 16px;
  border-radius: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="progressbar"&gt;
  &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Here's the fiddle: <a href="http://jsfiddle.net/2o4vh3es/" rel="nofollow noreferrer">jsFiddle</a> </p>

<p>And here's what it looks like:
<img src="https://i.stack.imgur.com/QY5ee.png" alt="jsFiddle-screenshot"></p>


blocks|key|583963|text|没有嵌套div的进度条...对于css线性渐变有效的每个元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|583964|这里是JSFiddle+http://jsfiddle.net/oj1L3y6t/2/|offset|length|583965|​|583966|function+show_progress(i)+{
++var+progress1+=+i;
++var+progress2+=+progress1+%2B+1;
++var+progress3+=+progress1+%2B+2;

++var+magic+=+"linear-gradient(to+right,+#FFC2CE+"+%2B+progress1+%2B+"%25+,red+"+%2B+progress2+%2B+"%25+,+#FFFFFF+"+%2B+progress3+%2B+"%25)";
++document.getElementById("progress-0").style.background+=+magic;

++var+magic+=+"linear-gradient(to+right,+lightblue+"+%2B+progress1+%2B+"%25+,+lightgreen+"+%2B+progress2+%2B+"%25)";
++document.getElementById("progress-1").style.background+=+magic;

++var+magic+=+"linear-gradient(to+right,+lightblue+"+%2B+progress1+%2B+"%25+,+#FFFFFF+100%25)";
++document.getElementById("progress-2").style.background+=+magic;

++var+magic+=+"linear-gradient(#FFC2CE+"+%2B+progress1+%2B+"%25+,red+"+%2B+progress2+%2B+"%25+,+#FFFFFF+"+%2B+progress3+%2B+"%25)";
++document.getElementById("progress-3").style.background+=+magic;
}

function+timeout()+{
++t+=+setTimeout(function()+{
++++show_progress(t)
++++timeout();
++},+50);
++if+(t+==+78)+{
++++clearTimeout(t);
++}
++console.log(t);
}

timeout();|code-block|syntax|javascript|583967|#progress-0+{
++border:+1px+solid+black;
++width:+500px;
++background:+#999;
++text-align:+center;
}

#progress-1+{
++border:+1px+solid+black;
++width:+500px;
++background:+#999;
++text-align:+center;
++margin-top:+10px;
++border-radius:+10px;
}

#progress-2+{
++border:+1px+solid+black;
++width:+500px;
++background:+#999;
++text-align:+center;
++margin-top:+10px;
}

#progress-3+{
++border:+1px+solid+black;
++width:+100px;
++height:+100px;
++background:+#999;
++line-height:+100px;
++text-align:+center;
++margin-top:+10px;
++border-radius:+200px;
}|583968|<div+id="progress-0">Loading</div>
<input+id="progress-1"+value="Loading"></input>
<button+id="progress-2">Loading</button>
<p+id="progress-3">Loading</p>|583969|583970|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/oj1L3y6t/2/^0|0|C|V|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|O|3|P|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|Q|3|G|5|6|7|18|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>Progress Bar without nested divs... for every element where the css linear-gradient works.</p>

<p>Here the JSFiddle <a href="http://jsfiddle.net/oj1L3y6t/2/" rel="nofollow noreferrer">http://jsfiddle.net/oj1L3y6t/2/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function show_progress(i) {
  var progress1 = i;
  var progress2 = progress1 + 1;
  var progress3 = progress1 + 2;

  var magic = "linear-gradient(to right, #FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-0").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , lightgreen " + progress2 + "%)";
  document.getElementById("progress-1").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , #FFFFFF 100%)";
  document.getElementById("progress-2").style.background = magic;

  var magic = "linear-gradient(#FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-3").style.background = magic;
}

function timeout() {
  t = setTimeout(function() {
    show_progress(t)
    timeout();
  }, 50);
  if (t == 78) {
    clearTimeout(t);
  }
  console.log(t);
}

timeout();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#progress-0 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
}

#progress-1 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
  border-radius: 10px;
}

#progress-2 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
}

#progress-3 {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  background: #999;
  line-height: 100px;
  text-align: center;
  margin-top: 10px;
  border-radius: 200px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="progress-0"&gt;Loading&lt;/div&gt;
&lt;input id="progress-1" value="Loading"&gt;&lt;/input&gt;
&lt;button id="progress-2"&gt;Loading&lt;/button&gt;
&lt;p id="progress-3"&gt;Loading&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|799741|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|799742|.loading+{
++position:+relative;
++width:+50%25;
++height:+200px;
++border:+1px+solid+rgba(160,+160,+164,+0.2);
++background-color:+rgba(160,+160,+164,+0.2);
++border-radius:+3px;
}

span.loader+{
++position:+absolute;
++top:+40%25;
++left:+10%25;
++width:+250px;
++height:+20px;
++border-radius:+8px;
++border:+2px+solid+rgba(160,+160,+164,+0.8);
++padding:+0;
}

span.loader+span.innerLoad+{
++text-align:+center;
++width:+140px;
++font-size:+15px;
++font-stretch:+extra-expanded;
++color:+#2A00FF;
++padding:+1px+18px+3px+80px;
++border-radius:+8px;
++background:+rgb(250,+198,+149);
++background:+-moz-linear-gradient(left,+rgba(250,+198,+149,+1)+0%25,+rgba(245,+171,+102,+1)+47%25,+rgba(239,+141,+49,+1)+100%25);
++background:+-webkit-gradient(linear,+left+top,+right+top,+color-stop(0%25,+rgba(250,+198,+149,+1)),+color-stop(47%25,+rgba(245,+171,+102,+1)),+color-stop(100%25,+rgba(239,+141,+49,+1)));
++background:+-webkit-linear-gradient(left,+rgba(250,+198,+149,+1)+0%25,+rgba(245,+171,+102,+1)+47%25,+rgba(239,+141,+49,+1)+100%25);
++background:+-o-linear-gradient(left,+rgba(250,+198,+149,+1)+0%25,+rgba(245,+171,+102,+1)+47%25,+rgba(239,+141,+49,+1)+100%25);
++background:+-ms-linear-gradient(left,+rgba(250,+198,+149,+1)+0%25,+rgba(245,+171,+102,+1)+47%25,+rgba(239,+141,+49,+1)+100%25);
++background:+linear-gradient(to+right,+rgba(250,+198,+149,+1)+0%25,+rgba(245,+171,+102,+1)+47%25,+rgba(239,+141,+49,+1)+100%25);
++filter:+progid:DXImageTransform.Microsoft.gradient(+startColorstr='#fac695',+endColorstr='#ef8d31',+GradientType=1);
}|code-block|syntax|javascript|799743|<div+class="loading">
++<span+class="loader">
+++++	<span+class="innerLoad">Loading...</span>
++</span>
</div>|799744|799745|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.loading {
  position: relative;
  width: 50%;
  height: 200px;
  border: 1px solid rgba(160, 160, 164, 0.2);
  background-color: rgba(160, 160, 164, 0.2);
  border-radius: 3px;
}

span.loader {
  position: absolute;
  top: 40%;
  left: 10%;
  width: 250px;
  height: 20px;
  border-radius: 8px;
  border: 2px solid rgba(160, 160, 164, 0.8);
  padding: 0;
}

span.loader span.innerLoad {
  text-align: center;
  width: 140px;
  font-size: 15px;
  font-stretch: extra-expanded;
  color: #2A00FF;
  padding: 1px 18px 3px 80px;
  border-radius: 8px;
  background: rgb(250, 198, 149);
  background: -moz-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 198, 149, 1)), color-stop(47%, rgba(245, 171, 102, 1)), color-stop(100%, rgba(239, 141, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -o-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -ms-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: linear-gradient(to right, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31', GradientType=1);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="loading"&gt;
  &lt;span class="loader"&gt;
     	&lt;span class="innerLoad"&gt;Loading...&lt;/span&gt;
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|584258|text|++++.black-strip
{+++width:100%25;
++++height:+30px;+++++++
++++background-color:black;+
}

.green-strip
{+++width:0%25;+++++++++++
++++height:+30px;+++++++
++++background-color:lime;
++++animation-name:+progress-bar;+++++++++++
++++animation-duration:+4s;++
++++animation-iteration-count:+infinite;+
}

@keyframes+progress-bar+{+
++++from{width:0%25}+
++++to{width:100%25}+
}

++++<div+class="black-strip">
++++++++<div+class="green-strip">
++++++++</div>
+++</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|584259|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>    .black-strip
{   width:100%;
    height: 30px;       
    background-color:black; 
}

.green-strip
{   width:0%;           
    height: 30px;       
    background-color:lime;
    animation-name: progress-bar;           
    animation-duration: 4s;  
    animation-iteration-count: infinite; 
}

@keyframes progress-bar { 
    from{width:0%} 
    to{width:100%} 
}

    &lt;div class="black-strip"&gt;
        &lt;div class="green-strip"&gt;
        &lt;/div&gt;
   &lt;/div&gt;
</code></pre>


blocks|key|800072|text|如果你希望在不增加代码的情况下有一个进度条，PACE对你来说是一个很棒的工具。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|800073|只需包含pace.js和您选择的CSS主题，您就可以获得一个漂亮的页面加载和AJAX导航进度指示器。PACE最好的功能是自动检测进度。|800074|它还包含各种主题和配色方案。|800075|值得一试。|800076|entityMap|0|LINK|mutability|MUTABLE|url|http://github.hubspot.com/pace/docs/welcome/^0|M|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

<p>If you wish to have a progress bar without adding some code <a href="http://github.hubspot.com/pace/docs/welcome/" rel="nofollow">PACE</a> can be an awesome tool for you.</p>

<p>Just include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and AJAX navigation. Best thing with PACE is the auto detection of progress.</p>

<p>It contains various themes and color schemes as well.</p>

<p>Worth a try.</p>


blocks|key|584104|text|有一个创建HTML5进度条here的教程。如果您不想使用HTML5方法，或者您正在寻找一个全浏览器解决方案，请尝试以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|584105|​|584106|<div+style="width:+150px;+height:+25px;+background-color:+#dbdbdb;">
++<div+style="height:+25px;+width:87%25;+background-color:+gold">&nbsp;</div>
</div>|code-block|syntax|javascript|584107|584108|您可以将金色更改为任何进度条颜色，并将#dbdbdb更改为进度条的背景色。|584109|entityMap|0|LINK|mutability|MUTABLE|url|http://meedo-uec.netlify.com/progress/v1.0.1/^0|D|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>There is a tutorial for creating an HTML5 progress bar <a href="http://meedo-uec.netlify.com/progress/v1.0.1/" rel="nofollow noreferrer">here</a>. If you don't want to use HTML5 methods or you are looking for an all-browser solution, try this code:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width: 150px; height: 25px; background-color: #dbdbdb;"&gt;
  &lt;div style="height: 25px; width:87%; background-color: gold"&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>You can change the color GOLD to any progress bar color and #dbdbdb to the background-color of your progress bar.</p>


blocks|key|800129|text|.bar+{
background+-+color:+blue;
height:+40+px;
width:+40+px;
border+-+style:+solid;
border+-+right+-+width:+1300+px;
border+-+radius:+40+px;
animation+-+name:+Load;
animation+-+duration:+11+s;
position:+relative;
animation+-+iteration+-+count:+1;
animation+-+fill+-+mode:+forwards;
}

@keyframes+Load+{
100+%25+{
++++width:+1300+px;border+-+right+-+width:+5;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|800130|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>.bar {
background - color: blue;
height: 40 px;
width: 40 px;
border - style: solid;
border - right - width: 1300 px;
border - radius: 40 px;
animation - name: Load;
animation - duration: 11 s;
position: relative;
animation - iteration - count: 1;
animation - fill - mode: forwards;
}

@keyframes Load {
100 % {
    width: 1300 px;border - right - width: 5;
}
</code></pre>


blocks|key|800132|text|使用setInterval。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|800133|​|800134|var+totalelem+=+document.getElementById("total");
var+progresselem+=+document.getElementById("progress");
var+interval+=+setInterval(function(){
++++if(progresselem.clientWidth>=totalelem.clientWidth)
++++{
++++++++clearInterval(interval);
++++++++return;
++++}
++++progresselem.style.width+=+progresselem.offsetWidth%2B1%2B"px";
},10)|code-block|syntax|javascript|800135|.outer
{
++++width:+200px;
++++height:+15px;
++++background:+red;
}
.inner
{
++++width:+0px;
++++height:+15px;
++++background:+green;
}|800136|<div+id="total"+class="outer">
++++<div+id="progress"+class="inner"></div>
</div>|800137|800138|使用CSS+Transtitions。|800139|800140|function+loading()
{
++++document.getElementById("progress").style.width="200px";
}|800141|.outer
{
++++width:+200px;
++++height:+15px;
++++background:+red;
}
.inner
{
++++width:+0px;
++++height:+15px;
++++background:+green;
++++-webkit-transition:width+3s+linear;
++++transition:+width+3s+linear;
}|800142|<div+id="total"+class="outer">
++++<div+id="progress"+class="inner"></div>
</div>
<button+id="load"+onclick="loading()">Load</button>|800143|800144|entityMap^0|2|B|0|0|0|0|0|0|2|G|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|T|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|10|3|G|5|6|7|1I|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|12|$]]

<p>Using <code>setInterval</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var totalelem = document.getElementById("total");
var progresselem = document.getElementById("progress");
var interval = setInterval(function(){
    if(progresselem.clientWidth&gt;=totalelem.clientWidth)
    {
        clearInterval(interval);
        return;
    }
    progresselem.style.width = progresselem.offsetWidth+1+"px";
},10)</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="total" class="outer"&gt;
    &lt;div id="progress" class="inner"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Using <code>CSS Transtitions</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function loading()
{
    document.getElementById("progress").style.width="200px";
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
    -webkit-transition:width 3s linear;
    transition: width 3s linear;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="total" class="outer"&gt;
    &lt;div id="progress" class="inner"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;button id="load" onclick="loading()"&gt;Load&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|584269|text|<!DOCTYPE+html>
<html+lang="pt-BR">
++++<head>
++++++++<meta+chatset="UTF-8"+/>
++++++++<title>CSS+Progress+Bar</title>
++++++++
++++++++<style>
++++++++++++.wrapper+{
++++++++++++++++width:+500px;
++++++++++++}
++++++++++++
++++++++++++.progress-bar+{
++++++++++++++++width:+100%25;
++++++++++++++++background-color:+#e0e0e0;
++++++++++++++++padding:+3px;
++++++++++++++++border-radius:+3px;
++++++++++++++++box-shadow:+inset+0+1px+3px+rgba(0,+0,+0,+.2);
++++++++++++}
++++++++++++
++++++++++++.progress-bar-fill+{
++++++++++++++++display:+block;
++++++++++++++++height:+22px;
++++++++++++++++background-color:+#659cef;
++++++++++++++++border-radius:+3px;
++++++++++++++++
++++++++++++++++transition:+width+500ms+ease-in-out;
++++++++++++}
++++++++</style>
++++++++
++++</head>
++++<body>
++++++++<div+class="wrapper">
++++++++++++<div+class="progress-bar">
++++++++++++++++<span+class="progress-bar-fill"+style="width:+70%25;"></span>
++++++++++++</div>
++++++++</div>
++++</body>
</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|584270|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;pt-BR&quot;&gt;
    &lt;head&gt;
        &lt;meta chatset=&quot;UTF-8&quot; /&gt;
        &lt;title&gt;CSS Progress Bar&lt;/title&gt;
        
        &lt;style&gt;
            .wrapper {
                width: 500px;
            }
            
            .progress-bar {
                width: 100%;
                background-color: #e0e0e0;
                padding: 3px;
                border-radius: 3px;
                box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
            }
            
            .progress-bar-fill {
                display: block;
                height: 22px;
                background-color: #659cef;
                border-radius: 3px;
                
                transition: width 500ms ease-in-out;
            }
        &lt;/style&gt;
        
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class=&quot;wrapper&quot;&gt;
            &lt;div class=&quot;progress-bar&quot;&gt;
                &lt;span class=&quot;progress-bar-fill&quot; style=&quot;width: 70%;&quot;&gt;&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|583732|text|为什么你不能为状态栏的每个部分创建多个图片呢？如果是第三次，只显示状态栏的第三次...这很简单。您可能会想出如何根据表单标签的输入将其更改为下一张图片。这是我的部分代码，您必须在稍后弄清楚表单的内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|583733|<form>+

<img+src="directory"></img>

<img+src="directory"></img>

</form>|code-block|syntax|javascript|583734|现在看起来很简单，不是吗？|583735|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Why can't you just Create Multiple pictures for each part of the status bar?
If it's a third just show a third of the status bar... it's very simple. You could probably figure out how to change it to the next picture based of input with the form tag.
Here's my part of the code, you have to figure out the form stuff later</p>

<pre><code>&lt;form&gt; &lt;!--(extra code)--&gt;
&lt;!--first progress bar:--&gt;
&lt;img src="directory"&gt;&lt;/img&gt;
&lt;!--second progress bar:--&gt;
&lt;img src="directory"&gt;&lt;/img&gt;
&lt;!--et caetera...--&gt;
&lt;/form&gt;
</code></pre>

<p>Now it seems simple, doesn't it?</p>


<p>I want to create a progress bar like in the below image:</p>

<p><img src="https://i.stack.imgur.com/LBvow.png" alt="Progress Bar Example"></p>

<p>I have no idea about creating this. Should I use HTML5 techniques?</p>

<p>Would you please give me some help about creating this progress bar?</p>


Progress Bar with HTML and CSS

我想创建一个进度条，如下图所示：​​我不知道如何创建它。我应该使用HTML5技术吗？你能给我一些关于创建这个进度条的帮助吗？

问带有HTML和CSS的进度条
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有HTML和CSS的进度条EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有HTML和CSS的进度条
EN