blocks|key|604890|text|可以使用XMLHttpRequest的“新”进度事件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|604891|=>更多信息：Mozilla+site|offset|length|604892|=>或：this+thread|604893|然而，新的XMLHttpRequests(2)是not+available+in+every+(mobile)browser。|604894|还有一个‘新的’进度/计量器控件，你可以使用...但它还没有被任何移动设备isn't+supported。因此，您必须使用像this+jquery+plugin这样的库，或者自己编写一个库。|604895|(更新:现在它也可用于Android)|604896|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress|1|https://stackoverflow.com/questions/76976/how-to-get-progress-from-xmlhttprequest|2|http://caniuse.com/#feat=xhr2|3|http://caniuse.com/#feat=progressmeter|4|http://docs.jquery.com/UI/Progressbar^0|0|7|C|0|0|4|B|1|0|O|12|2|0|11|F|3|1Q|I|4|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|H|3|I|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|J|3|K|5|6|7|1G|8|@]|9|@$D|1H|E|1I|1|1J]|$D|1K|E|1L|1|1M]]|A|$]]|$1|L|3|M|5|6|7|1N|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]|V|$5|Q|R|S|A|$T|W]]|X|$5|Q|R|S|A|$T|Y]]|Z|$5|Q|R|S|A|$T|10]]|11|$5|Q|R|S|A|$T|12]]]]

<p>It is possible using the 'new' progress events of the XMLHttpRequest</p>

<p>=> more info: <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" rel="nofollow noreferrer">Mozilla site</a></p>

<p>=> or: <a href="https://stackoverflow.com/questions/76976/how-to-get-progress-from-xmlhttprequest">this thread</a></p>

<p>The new XMLHttpRequests(2) however are <a href="http://caniuse.com/#feat=xhr2" rel="nofollow noreferrer">not available in every (mobile)browser</a>.</p>

<p>And there is a 'new' progress/meter control you could use...
But it <a href="http://caniuse.com/#feat=progressmeter" rel="nofollow noreferrer">isn't supported</a> yet by any mobile device. So you will have to use a lib like <a href="http://docs.jquery.com/UI/Progressbar" rel="nofollow noreferrer">this jquery plugin</a> for example or write one yourself.</p>

<p>(update: now it is also available for Android)</p>


blocks|key|604952|text|您可以使用w3.css创建w3-progressbar，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|604953|​|604954|<!DOCTYPE+html>
<html>
<title>W3.CSS</title>
<meta+name="viewport"+content="width=device-width,+initial-scale=1">
<link+rel="stylesheet"+href="http://www.w3schools.com/lib/w3.css">

<body+class="w3-container">

<h2>Dynamic+Progress+Bar+with+Labels</h2>
<p>Centered+label:</p>

<div+class="w3-progress-container">
++<div+id="myBar"+class="w3-progressbar+w3-green"+style="width:20%25">
++++<div+id="demo"+class="w3-center+w3-text-white">20%25</div>
++</div>
</div>
<br>

<button+class="w3-btn+w3-dark-grey"+onclick="move()">Click+Me</button>+

<script>
function+move()+{
++var+elem+=+document.getElementById("myBar");+++
++var+width+=+20;
++var+id+=+setInterval(frame,+10);
++function+frame()+{
++++if+(width+>=+100)+{
++++++clearInterval(id);
++++}+else+{
++++++width%2B%2B;+
++++++elem.style.width+=+width+%2B+'%25';+
++++++document.getElementById("demo").innerHTML+=+width+*+1++%2B+'%25';
++++}
++}
}
</script>

</body>
</html>+|code-block|syntax|javascript|604955|604956|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>You can use w3.css to creat w3-progressbar as:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;title&gt;W3.CSS&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"&gt;

&lt;body class="w3-container"&gt;

&lt;h2&gt;Dynamic Progress Bar with Labels&lt;/h2&gt;
&lt;p&gt;Centered label:&lt;/p&gt;

&lt;div class="w3-progress-container"&gt;
  &lt;div id="myBar" class="w3-progressbar w3-green" style="width:20%"&gt;
    &lt;div id="demo" class="w3-center w3-text-white"&gt;20%&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;

&lt;button class="w3-btn w3-dark-grey" onclick="move()"&gt;Click Me&lt;/button&gt; 

&lt;script&gt;
function move() {
  var elem = document.getElementById("myBar");   
  var width = 20;
  var id = setInterval(frame, 10);
  function frame() {
    if (width &gt;= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      document.getElementById("demo").innerHTML = width * 1  + '%';
    }
  }
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt; </code></pre>
</div>
</div>
</p>


<p>I was working on a project which requires to download content from a database. The site is generally accessed using mobiles (high end smartphones).</p>

<p>I was wondering if it is possible to add a progress bar during the download of the content using HTML5, so that when this action is going on appears a light box through the entire screen and only the progress bar is shown.</p>


Progress Bar (Download) Using HTML 5

数据库

Android

HTML5

我正在做一个需要从数据库下载内容的项目。该网站通常使用手机(高端智能手机)访问。我想知道是否有可能在使用HTML5下载内容的过程中添加一个进度条，这样当此操作进行时，整个屏幕上会出现一个灯框，并且只显示进度条。

问使用HTML 5的进度条(下载)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML 5的进度条(下载)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML 5的进度条(下载)
EN