-
Notifications
You must be signed in to change notification settings - Fork 43
/
Copy pathindex.html
9 lines (8 loc) · 3.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
<!doctype html><head><meta name="viewport" content="width=device-width" /><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:600,300" /><link rel="stylesheet" href="assets/css/demo.css" /></head><body><div id="container"><div class="container" data-reactroot=""><div class="row"><div class="col-sm-9"><h1>React Loaders</h1><h2><em>Powered by <a href="https://github.com/ConnorAtherton/loaders.css">Loaders.css</a></em></h2><h2 style="margin-bottom:1em">Delightful and performance-focused pure css loading animations.</h2></div><div class="col-sm-3"><a class="btn btn-default btn-github btn-lg pull-right" href="https://github.com/jonjaques/react-loaders">View on Github</a></div></div><div class="row"><div class="col-sm-7"><pre class="hidden-xs" data-type="shell">npm i --save react-loaders loaders.css</pre><pre class="hidden-xs" data-type="js">import Loader from 'react-loaders'<br style="display:"/><br style="display:"/>let loader = <Loader type="pacman" /></pre><pre class="hidden-xs" data-type="scss">$primary-color: $my-brand-color;
@import 'loaders.css/src/animations/pacman.scss'
.loader-hidden {
display: none;
}
.loader-active {
display: block;
}</pre></div><div class="col-sm-4 col-sm-offset-1"><form><div class="checkbox"><label><input type="checkbox" checked=""/>Active</label></div><div class="checkbox"><label><input type="checkbox"/>See All</label></div><div style="display:" class="form-group"><label>Type</label><select class="form-control"><option value="ball-pulse">ball-pulse</option><option value="ball-grid-pulse">ball-grid-pulse</option><option value="ball-clip-rotate">ball-clip-rotate</option><option value="ball-clip-rotate-pulse">ball-clip-rotate-pulse</option><option value="square-spin">square-spin</option><option value="ball-clip-rotate-multiple">ball-clip-rotate-multiple</option><option value="ball-pulse-rise">ball-pulse-rise</option><option value="ball-rotate">ball-rotate</option><option value="cube-transition">cube-transition</option><option value="ball-zig-zag">ball-zig-zag</option><option value="ball-zig-zag-deflect">ball-zig-zag-deflect</option><option value="ball-triangle-path">ball-triangle-path</option><option value="ball-scale">ball-scale</option><option value="line-scale">line-scale</option><option value="line-scale-party">line-scale-party</option><option value="ball-scale-multiple">ball-scale-multiple</option><option value="ball-pulse-sync">ball-pulse-sync</option><option value="ball-beat">ball-beat</option><option value="line-scale-pulse-out">line-scale-pulse-out</option><option value="line-scale-pulse-out-rapid">line-scale-pulse-out-rapid</option><option value="ball-scale-ripple">ball-scale-ripple</option><option value="ball-scale-ripple-multiple">ball-scale-ripple-multiple</option><option value="ball-spin-fade-loader">ball-spin-fade-loader</option><option value="line-spin-fade-loader">line-spin-fade-loader</option><option value="triangle-skew-spin">triangle-skew-spin</option><option selected="" value="pacman">pacman</option><option value="ball-grid-beat">ball-grid-beat</option><option value="semi-circle-spin">semi-circle-spin</option></select></div></form></div></div><div class="row"><div class="col-xs-12"><div class="loaders single"><div class="loader-container"><div class="loader loader-active"><div class="loader-inner pacman"><div></div><div></div><div></div><div></div><div></div></div></div><p>pacman</p></div></div></div></div></div></div><script src="./dist/demo.js"></script><script>__DEMO__.run()</script></body></html>