mozilla

Compare Revisions

<progress>

Change Revisions

Revision 8410:

Revision 8410 by McGurk on

Revision 8411:

Revision 8411 by hATrayflood on

Title:
progress
progress
Slug:
HTML/Element/progress
HTML/Element/progress
Tags:
HTML, NeedsBrowserCompatibility, HTML:Element, "HTML:Element Reference", HTML5
HTML, NeedsBrowserCompatibility, HTML:Element, "HTML:Element Reference", HTML5
Content:

Revision 8410
Revision 8411
n50            <a class=" external" href="http://www.whatwg.org/specn50            <a class="external" href="http://www.whatwg.org/specs
>s/web-apps/current-work/multipage/the-button-element.html#the-pro>/web-apps/current-work/multipage/the-button-element.html#the-prog
>gress-element" rel="external nofollow" target="_blank" title="htt>ress-element" rel="external nofollow" target="_blank" title="http
>p://www.whatwg.org/specs/web-apps/current-work/multipage/the-butt>://www.whatwg.org/specs/web-apps/current-work/multipage/the-butto
>on-element.html#the-progress-element">HTML5, section 4.10.16</a>>n-element.html#the-progress-element">HTML5, section 4.10.16</a>
n84    <dl>n
85      <dd>
86        <h2>84    <h2>
87          DOM interface85      DOM interface
88        </h2>86    </h2>
89        <p>87    <p>
90          This element implements the <code><a href="/en/DOM/HTML88      This element implements the <code><a href="/en/DOM/HTMLProg
>ProgressElement" title="en/DOM/HTMLProgressElement">HTMLProgressE>ressElement" title="en/DOM/HTMLProgressElement">HTMLProgressEleme
>lement</a></code> interface.>nt</a></code> interface.
91        </p>89    </p>
92        <h2>90    <h2>
93          Examples91      Examples
94        </h2>92    </h2>
95        <pre class="brush: html">93    <pre class="brush: html">
t98        <h3>t96    <h3>
99          Result97      Result
100        </h3>98    </h3>
101        <p>99    <p>
102          {{ HTMLLiveSample("progress.html") }}100      {{ HTMLLiveSample("progress.html") }}
103        </p>101    </p>
104        <p>102    <p>
105          On Google Chrome, the resulting progress looks like thi103      On Google Chrome, the resulting progress looks like this:
>s: 
106        </p>104    </p>
107        <p>105    <p>
108          <img alt="progress-1.png" class="internal default" src=106      <img alt="progress-1.png" class="internal default" src="/@a
>"/@api/deki/files/4946/=progress-1.png">>pi/deki/files/4946/=progress-1.png">
109        </p>107    </p>
110        <h3>108    <h3>
111          Additional examples109      Additional examples
112        </h3>110    </h3>
113        <p>111    <p>
114          See {{ cssxref("orient") }}.112      See {{ cssxref("orient") }}.
115        </p>113    </p>
116        <h2>114    <h2>
117          Browser compatibility115      Browser compatibility
118        </h2>116    </h2>
119        <p>117    <p>
120          {{ CompatibilityTable() }}118      {{ CompatibilityTable() }}
121        </p>119    </p>
122        <div id="compat-desktop">120    <div id="compat-desktop">
123          <table class="compat-table">121      <table class="compat-table">
124            <tbody>122        <tbody>
125              <tr>123          <tr>
126                <th>124            <th>
127                  Feature125              Feature
128                </th>126            </th>
129                <th>127            <th>
130                  Chrome128              Chrome
131                </th>129            </th>
132                <th>130            <th>
133                  Firefox (Gecko)131              Firefox (Gecko)
134                </th>132            </th>
135                <th>133            <th>
136                  Internet Explorer134              Internet Explorer
137                </th>135            </th>
138                <th>136            <th>
139                  Opera137              Opera
140                </th>138            </th>
141                <th>139            <th>
142                  Safari140              Safari
143                </th>141            </th>
144              </tr>142          </tr>
145              <tr>143          <tr>
146                <td>144            <td>
147                  Basic support145              Basic support
148                </td>146            </td>
149                <td>147            <td>
150                  6.0148              6.0
151                </td>149            </td>
152                <td>150            <td>
153                  {{ CompatGeckoDesktop("6.0") }}151              {{ CompatGeckoDesktop("6.0") }}
154                </td>152            </td>
155                <td>153            <td>
156                  {{ CompatNo() }}154              {{ CompatNo() }}
157                </td>155            </td>
158                <td>156            <td>
159                  11.0157              11.0
160                </td>158            </td>
161                <td>159            <td>
162                  {{ CompatNo() }}160              {{ CompatNo() }}
163                </td>
164              </tr>
165            </tbody>161            </td>
162          </tr>
163        </tbody>
166          </table>164      </table>
167        </div>165    </div>
168        <div id="compat-mobile">166    <div id="compat-mobile">
169          <table class="compat-table">167      <table class="compat-table">
170            <tbody>168        <tbody>
171              <tr>169          <tr>
172                <th>170            <th>
173                  Feature171              Feature
174                </th>172            </th>
175                <th>173            <th>
176                  Android174              Android
177                </th>175            </th>
178                <th>176            <th>
179                  Firefox Mobile (Gecko)177              Firefox Mobile (Gecko)
180                </th>178            </th>
181                <th>179            <th>
182                  IE Mobile180              IE Mobile
183                </th>181            </th>
184                <th>182            <th>
185                  Opera Mobile183              Opera Mobile
186                </th>184            </th>
187                <th>185            <th>
188                  Safari Mobile186              Safari Mobile
189                </th>187            </th>
190              </tr>188          </tr>
191              <tr>189          <tr>
192                <td>190            <td>
193                  Basic support191              Basic support
194                </td>192            </td>
195                <td>193            <td>
196                  {{ CompatNo() }}194              {{ CompatNo() }}
197                </td>195            </td>
198                <td>196            <td>
199                  {{ CompatGeckoMobile("6.0") }}197              {{ CompatGeckoMobile("6.0") }}
200                </td>198            </td>
201                <td>199            <td>
202                  {{ CompatNo() }}200              {{ CompatNo() }}
203                </td>201            </td>
204                <td>202            <td>
205                  11.0203              11.0
206                </td>204            </td>
207                <td>205            <td>
208                  {{ CompatNo() }}206              {{ CompatNo() }}
209                </td>
210              </tr>
211            </tbody>207            </td>
208          </tr>
209        </tbody>
212          </table>210      </table>
213        </div>211    </div>
214        <h3>212    <h3>
215          Gecko notes213      Gecko notes
216        </h3>214    </h3>
217        <p>215    <p>
218          Gecko provides the {{ cssxref("::-moz-progress-bar") }}216      Gecko provides the {{ cssxref("::-moz-progress-bar") }} pse
> pseudo-element, which lets you style the part of the interior of>udo-element, which lets you style the part of the interior of the
> the progress bar representing the amount of work completed so fa> progress bar representing the amount of work completed so far.
>r. 
219        </p>217    </p>
220        <h2>218    <h2>
221          See also219      See also
222        </h2>220    </h2>
223        <ul>221    <ul>
224          <li>{{ cssxref("orient") }}222      <li>{{ cssxref("orient") }}
225          </li>223      </li>
226          <li>{{ cssxref(":indeterminate") }}224      <li>{{ cssxref(":indeterminate") }}
227          </li>225      </li>
228        </ul>
229      </dd>
230    </dl>226    </ul>
227    <p>
228      {{ languages({"ja": "ja/HTML/Element/progress"}) }}
229    </p>

Back to History