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


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


<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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问带有HTML和CSS的进度条
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有HTML和CSS的进度条EN