UNPKG

25 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="msapplication-tap-highlight" content="no">
8 <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
9 <title>Preloader - Materialize</title>
10 <!-- Favicons-->
11 <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
12 <meta name="msapplication-TileColor" content="#FFFFFF">
13 <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
14 <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
15 <!-- Android 5 Chrome Color-->
16 <meta name="theme-color" content="#EE6E73">
17 <!-- CSS-->
18 <link href="css/prism.css" rel="stylesheet">
19 <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
20 <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
21 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
22 <script>
23 window.liveSettings = {
24 api_key: "a0b49b34b93844c38eaee15690d86413",
25 picker: "bottom-right",
26 detectlang: true,
27 dynamic: true,
28 autocollect: true
29 };
30 </script>
31 <script src="//cdn.transifex.com/live.js"></script>
32 </head>
33 <body>
34 <header>
35 <nav class="top-nav">
36 <div class="container">
37 <div class="nav-wrapper"><a class="page-title">Preloader</a></div>
38 </div>
39 </nav>
40 <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div>
41 <ul id="nav-mobile" class="side-nav fixed">
42 <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
43 <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
44 <li class="search">
45 <div class="search-wrapper card">
46 <input id="search"><i class="material-icons">search</i>
47 <div class="search-results"></div>
48 </div>
49 </li>
50 <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
51 <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
52 <li class="no-padding">
53 <ul class="collapsible collapsible-accordion">
54 <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
55 <div class="collapsible-body">
56 <ul>
57 <li><a href="color.html">Color</a></li>
58 <li><a href="grid.html">Grid</a></li>
59 <li><a href="helpers.html">Helpers</a></li>
60 <li><a href="media-css.html">Media</a></li>
61 <li><a href="sass.html">Sass</a></li>
62 <li><a href="shadow.html">Shadow</a></li>
63 <li><a href="table.html">Table</a></li>
64 <li><a href="css-transitions.html">Transitions</a></li>
65 <li><a href="typography.html">Typography</a></li>
66 </ul>
67 </div>
68 </li>
69 <li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
70 <div class="collapsible-body">
71 <ul>
72 <li><a href="badges.html">Badges</a></li>
73 <li><a href="buttons.html">Buttons</a></li>
74 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
75 <li><a href="cards.html">Cards</a></li>
76 <li><a href="chips.html">Chips</a></li>
77 <li><a href="collections.html">Collections</a></li>
78 <li><a href="footer.html">Footer</a></li>
79 <li><a href="forms.html">Forms</a></li>
80 <li><a href="icons.html">Icons</a></li>
81 <li><a href="navbar.html">Navbar</a></li>
82 <li><a href="pagination.html">Pagination</a></li>
83 <li class="active"><a href="preloader.html">Preloader</a></li>
84 </ul>
85 </div>
86 </li>
87 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
88 <div class="collapsible-body">
89 <ul>
90 <li><a href="carousel.html">Carousel</a></li>
91 <li><a href="collapsible.html">Collapsible</a></li>
92 <li><a href="dialogs.html">Dialogs</a></li>
93 <li><a href="dropdown.html">Dropdown</a></li>
94 <li><a href="media.html">Media</a></li>
95 <li><a href="modals.html">Modals</a></li>
96 <li><a href="parallax.html">Parallax</a></li>
97 <li><a href="pushpin.html">Pushpin</a></li>
98 <li><a href="scrollfire.html">ScrollFire</a></li>
99 <li><a href="scrollspy.html">Scrollspy</a></li>
100 <li><a href="side-nav.html">SideNav</a></li>
101 <li><a href="tabs.html">Tabs</a></li>
102 <li><a href="transitions.html">Transitions</a></li>
103 <li><a href="waves.html">Waves</a></li>
104 </ul>
105 </div>
106 </li>
107 </ul>
108 </li>
109 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
110 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
111 </ul>
112 </header>
113 <main><div class="container">
114 <div class="row">
115
116 <div class="col s12 m9 l10">
117 <p class="caption">If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.</p>
118 <div id="linear" class="section scrollspy">
119 <h2 class="header">Linear</h2>
120 <p>There are a couple different types of linear progress bars.</p>
121 <h4>Determinate</h4>
122 <div class="row">
123 <div class="div col s8 offset-s2">
124 <div class="progress">
125 <div class="determinate" style="width: 70%"></div>
126 </div>
127 </div>
128 </div>
129 <pre><code class="language-markup">
130 &lt;div class="progress">
131 &lt;div class="determinate" style="width: 70%">&lt;/div>
132 &lt;/div>
133 </code></pre>
134
135 <h4>Indeterminate</h4>
136 <div class="row">
137 <div class="div col s8 offset-s2">
138 <div class="progress">
139 <div class="indeterminate"></div>
140 </div>
141 </div>
142 </div>
143 <pre><code class="language-markup">
144 &lt;div class="progress">
145 &lt;div class="indeterminate">&lt;/div>
146 &lt;/div>
147 </code></pre>
148
149 </div>
150
151 <!-- Preloader Section-->
152 <div id="circular" class="section scrollspy">
153 <h2 class="header">Circular</h2>
154 <p>There are 4 colors and 3 sizes of circular spinners. The spinner should be nested in a <code class="language-markup">preloader-wrapper</code> div. The default size is medium, but you can add the classes <code class="language-markup">big</code> or <code class="language-markup">small</code> to adjust the size accordingly. You can add the classes <code class="language-markup">spinner-red-only</code>, <code class="language-markup">spinner-blue-only</code>, <code class="language-markup">spinner-yellow-only</code> and <code class="language-markup">spinner-green-only</code>. You can also leave this class as just <code class="language-markup">spinner-layer</code> and it will be set to the <code class="language-css">$spinner-default-color</code> variable in our variables.scss file.</p>
155 <h4>Colors</h4>
156 <div class="row">
157 <div class="col s12 m4 center">
158 <div class="preloader-wrapper big active">
159 <div class="spinner-layer spinner-blue-only">
160 <div class="circle-clipper left">
161 <div class="circle"></div>
162 </div><div class="gap-patch">
163 <div class="circle"></div>
164 </div><div class="circle-clipper right">
165 <div class="circle"></div>
166 </div>
167 </div>
168 </div>
169 </div>
170
171 <div class="col s12 m4 center">
172
173 <div class="preloader-wrapper active">
174 <div class="spinner-layer spinner-red-only">
175 <div class="circle-clipper left">
176 <div class="circle"></div>
177 </div><div class="gap-patch">
178 <div class="circle"></div>
179 </div><div class="circle-clipper right">
180 <div class="circle"></div>
181 </div>
182 </div>
183 </div>
184
185 </div>
186 <div class="col s12 m4 center">
187
188 <div class="preloader-wrapper small active">
189 <div class="spinner-layer spinner-green-only">
190 <div class="circle-clipper left">
191 <div class="circle"></div>
192 </div><div class="gap-patch">
193 <div class="circle"></div>
194 </div><div class="circle-clipper right">
195 <div class="circle"></div>
196 </div>
197 </div>
198 </div>
199
200 </div>
201 </div>
202 <pre><code class="language-markup">
203 &lt;div class="preloader-wrapper big active">
204 &lt;div class="spinner-layer spinner-blue-only">
205 &lt;div class="circle-clipper left">
206 &lt;div class="circle">&lt;/div>
207 &lt;/div>&lt;div class="gap-patch">
208 &lt;div class="circle">&lt;/div>
209 &lt;/div>&lt;div class="circle-clipper right">
210 &lt;div class="circle">&lt;/div>
211 &lt;/div>
212 &lt;/div>
213 &lt;/div>
214
215 &lt;div class=&quot;preloader-wrapper active&quot;&gt;
216 &lt;div class=&quot;spinner-layer spinner-red-only&quot;&gt;
217 &lt;div class=&quot;circle-clipper left&quot;&gt;
218 &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
219 &lt;/div&gt;&lt;div class=&quot;gap-patch&quot;&gt;
220 &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
221 &lt;/div&gt;&lt;div class=&quot;circle-clipper right&quot;&gt;
222 &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
223 &lt;/div&gt;
224 &lt;/div&gt;
225 &lt;/div&gt;
226
227 &lt;div class=&quot;preloader-wrapper small active&quot;&gt;
228 &lt;div class=&quot;spinner-layer spinner-green-only&quot;&gt;
229 &lt;div class=&quot;circle-clipper left&quot;&gt;
230 &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
231 &lt;/div&gt;&lt;div class=&quot;gap-patch&quot;&gt;
232 &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
233 &lt;/div&gt;&lt;div class=&quot;circle-clipper right&quot;&gt;
234 &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
235 &lt;/div&gt;
236 &lt;/div&gt;
237 &lt;/div&gt;
238 </code></pre>
239 </div>
240
241 <div id="circular-color" class="section scrollspy">
242 <h2 class="header">Circular Flashing Colors</h2>
243 <div class="row">
244 <div class="col s12 m4 center">
245 <div class="preloader-wrapper big active">
246 <div class="spinner-layer spinner-blue">
247 <div class="circle-clipper left">
248 <div class="circle"></div>
249 </div><div class="gap-patch">
250 <div class="circle"></div>
251 </div><div class="circle-clipper right">
252 <div class="circle"></div>
253 </div>
254 </div>
255
256 <div class="spinner-layer spinner-red">
257 <div class="circle-clipper left">
258 <div class="circle"></div>
259 </div><div class="gap-patch">
260 <div class="circle"></div>
261 </div><div class="circle-clipper right">
262 <div class="circle"></div>
263 </div>
264 </div>
265
266 <div class="spinner-layer spinner-yellow">
267 <div class="circle-clipper left">
268 <div class="circle"></div>
269 </div><div class="gap-patch">
270 <div class="circle"></div>
271 </div><div class="circle-clipper right">
272 <div class="circle"></div>
273 </div>
274 </div>
275
276 <div class="spinner-layer spinner-green">
277 <div class="circle-clipper left">
278 <div class="circle"></div>
279 </div><div class="gap-patch">
280 <div class="circle"></div>
281 </div><div class="circle-clipper right">
282 <div class="circle"></div>
283 </div>
284 </div>
285 </div>
286 </div>
287 <div class="col s12 m4 center">
288
289 <div class="preloader-wrapper active">
290 <div class="spinner-layer spinner-blue">
291 <div class="circle-clipper left">
292 <div class="circle"></div>
293 </div><div class="gap-patch">
294 <div class="circle"></div>
295 </div><div class="circle-clipper right">
296 <div class="circle"></div>
297 </div>
298 </div>
299
300 <div class="spinner-layer spinner-red">
301 <div class="circle-clipper left">
302 <div class="circle"></div>
303 </div><div class="gap-patch">
304 <div class="circle"></div>
305 </div><div class="circle-clipper right">
306 <div class="circle"></div>
307 </div>
308 </div>
309
310 <div class="spinner-layer spinner-yellow">
311 <div class="circle-clipper left">
312 <div class="circle"></div>
313 </div><div class="gap-patch">
314 <div class="circle"></div>
315 </div><div class="circle-clipper right">
316 <div class="circle"></div>
317 </div>
318 </div>
319
320 <div class="spinner-layer spinner-green">
321 <div class="circle-clipper left">
322 <div class="circle"></div>
323 </div><div class="gap-patch">
324 <div class="circle"></div>
325 </div><div class="circle-clipper right">
326 <div class="circle"></div>
327 </div>
328 </div>
329 </div>
330
331 </div>
332 <div class="col s12 m4 center">
333
334 <div class="preloader-wrapper small active">
335 <div class="spinner-layer spinner-blue">
336 <div class="circle-clipper left">
337 <div class="circle"></div>
338 </div><div class="gap-patch">
339 <div class="circle"></div>
340 </div><div class="circle-clipper right">
341 <div class="circle"></div>
342 </div>
343 </div>
344
345 <div class="spinner-layer spinner-red">
346 <div class="circle-clipper left">
347 <div class="circle"></div>
348 </div><div class="gap-patch">
349 <div class="circle"></div>
350 </div><div class="circle-clipper right">
351 <div class="circle"></div>
352 </div>
353 </div>
354
355 <div class="spinner-layer spinner-yellow">
356 <div class="circle-clipper left">
357 <div class="circle"></div>
358 </div><div class="gap-patch">
359 <div class="circle"></div>
360 </div><div class="circle-clipper right">
361 <div class="circle"></div>
362 </div>
363 </div>
364
365 <div class="spinner-layer spinner-green">
366 <div class="circle-clipper left">
367 <div class="circle"></div>
368 </div><div class="gap-patch">
369 <div class="circle"></div>
370 </div><div class="circle-clipper right">
371 <div class="circle"></div>
372 </div>
373 </div>
374 </div>
375
376 </div>
377 </div>
378 <pre><code class="language-markup">
379 &lt;div class="preloader-wrapper big active">
380 &lt;div class="spinner-layer spinner-blue">
381 &lt;div class="circle-clipper left">
382 &lt;div class="circle">&lt;/div>
383 &lt;/div>&lt;div class="gap-patch">
384 &lt;div class="circle">&lt;/div>
385 &lt;/div>&lt;div class="circle-clipper right">
386 &lt;div class="circle">&lt;/div>
387 &lt;/div>
388 &lt;/div>
389
390 &lt;div class="spinner-layer spinner-red">
391 &lt;div class="circle-clipper left">
392 &lt;div class="circle">&lt;/div>
393 &lt;/div>&lt;div class="gap-patch">
394 &lt;div class="circle">&lt;/div>
395 &lt;/div>&lt;div class="circle-clipper right">
396 &lt;div class="circle">&lt;/div>
397 &lt;/div>
398 &lt;/div>
399
400 &lt;div class="spinner-layer spinner-yellow">
401 &lt;div class="circle-clipper left">
402 &lt;div class="circle">&lt;/div>
403 &lt;/div>&lt;div class="gap-patch">
404 &lt;div class="circle">&lt;/div>
405 &lt;/div>&lt;div class="circle-clipper right">
406 &lt;div class="circle">&lt;/div>
407 &lt;/div>
408 &lt;/div>
409
410 &lt;div class="spinner-layer spinner-green">
411 &lt;div class="circle-clipper left">
412 &lt;div class="circle">&lt;/div>
413 &lt;/div>&lt;div class="gap-patch">
414 &lt;div class="circle">&lt;/div>
415 &lt;/div>&lt;div class="circle-clipper right">
416 &lt;div class="circle">&lt;/div>
417 &lt;/div>
418 &lt;/div>
419 &lt;/div>
420 </code></pre>
421 </div>
422
423
424 </div>
425
426
427 <div class="col hide-on-small-only m3 l2">
428 <div class="toc-wrapper">
429 <div class="buysellads hide-on-small-only">
430 <!-- CarbonAds Zone Code -->
431 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
432 </div>
433 <div style="height: 1px;">
434 <ul class="section table-of-contents">
435 <li><a href="#linear">Linear</a></li>
436 <li><a href="#circular">Circular</a></li>
437 <li><a href="#circular-color">Circular Flashing Colors</a></li>
438 </ul>
439 </div>
440 </div>
441 </div>
442
443 </div>
444</div>
445
446
447 </main> <footer class="page-footer">
448 <div class="container">
449 <div class="row">
450 <div class="col l4 s12">
451 <h5 class="white-text">Help Materialize Grow</h5>
452 <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
453 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
454<input type="hidden" name="cmd" value="_s-xclick">
455<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
456">
457<button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
458</button>
459</form>
460
461 </div>
462 <div class="col l4 s12">
463 <h5 class="white-text">Join the Discussion</h5>
464 <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
465 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
466 </div>
467 <div class="col l4 s12" style="overflow: hidden;">
468 <h5 class="white-text">Connect</h5>
469 <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
470 <br>
471 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
472 <br>
473 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
474 </div>
475 </div>
476 </div>
477 <div class="footer-copyright">
478 <div class="container">
479 © 2014-2017 Materialize, All rights reserved.
480 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
481 </div>
482 </div>
483 </footer>
484
485 <!-- Scripts-->
486 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
487 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
488 </script>
489 <script src="js/jquery.timeago.min.js"></script>
490 <script src="js/prism.js"></script>
491 <script src="jade/lunr.min.js"></script>
492 <script src="jade/search.js"></script>
493 <script src="bin/materialize.js"></script>
494 <script src="js/init.js"></script>
495 <!-- Twitter Button -->
496 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
497
498 <!-- Google Plus Button-->
499 <script src="https://apis.google.com/js/platform.js" async defer></script>
500
501 <!-- Google Analytics -->
502 <script>
503 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
504 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
505 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
506 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
507
508 ga('create', 'UA-56218128-1', 'auto');
509 ga('require', 'displayfeatures');
510 ga('send', 'pageview');
511 </script>
512
513 </body>
514</html>
\No newline at end of file