forked from jonjaques/react-loaders
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
19 lines (18 loc) · 6.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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-reactid=".2erxwgtr20w" data-react-checksum="1440386701"><div class="row" data-reactid=".2erxwgtr20w.0"><div class="col-sm-9" data-reactid=".2erxwgtr20w.0.0"><h1 data-reactid=".2erxwgtr20w.0.0.0">React Loaders</h1><h2 data-reactid=".2erxwgtr20w.0.0.1"><em data-reactid=".2erxwgtr20w.0.0.1.0"><span data-reactid=".2erxwgtr20w.0.0.1.0.0">Powered by </span><a href="https://github.com/ConnorAtherton/loaders.css" data-reactid=".2erxwgtr20w.0.0.1.0.1">Loaders.css</a></em></h2><h2 style="margin-bottom:1em;" data-reactid=".2erxwgtr20w.0.0.2">Delightful and performance-focused pure css loading animations.</h2></div><div class="col-sm-3" data-reactid=".2erxwgtr20w.0.1"><a class="btn btn-default btn-github btn-lg pull-right" href="https://github.com/jonjaques/react-loaders" data-reactid=".2erxwgtr20w.0.1.0">View on Github</a></div></div><div class="row" data-reactid=".2erxwgtr20w.1"><div class="col-sm-7" data-reactid=".2erxwgtr20w.1.0"><pre class="hidden-xs" data-type="shell" data-reactid=".2erxwgtr20w.1.0.0">npm i --save react-loaders</pre><pre class="hidden-xs" data-type="js" data-reactid=".2erxwgtr20w.1.0.1"><span data-reactid=".2erxwgtr20w.1.0.1.0">import Loader from 'react-loaders'</span><br style="display:;" data-reactid=".2erxwgtr20w.1.0.1.1"/><br style="display:;" data-reactid=".2erxwgtr20w.1.0.1.2"/><span data-reactid=".2erxwgtr20w.1.0.1.3">let loader = <Loader type="pacman" /></span></pre><pre class="hidden-xs" data-type="scss" data-reactid=".2erxwgtr20w.1.0.2">$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" data-reactid=".2erxwgtr20w.1.1"><form data-reactid=".2erxwgtr20w.1.1.0"><div class="checkbox" data-reactid=".2erxwgtr20w.1.1.0.0"><label data-reactid=".2erxwgtr20w.1.1.0.0.0"><input type="checkbox" checked="" data-reactid=".2erxwgtr20w.1.1.0.0.0.0"/><span data-reactid=".2erxwgtr20w.1.1.0.0.0.1">Active</span></label></div><div class="checkbox" data-reactid=".2erxwgtr20w.1.1.0.1"><label data-reactid=".2erxwgtr20w.1.1.0.1.0"><input type="checkbox" data-reactid=".2erxwgtr20w.1.1.0.1.0.0"/><span data-reactid=".2erxwgtr20w.1.1.0.1.0.1">See All</span></label></div><div style="display:;" class="form-group" data-reactid=".2erxwgtr20w.1.1.0.2"><label data-reactid=".2erxwgtr20w.1.1.0.2.0">Type</label><select class="form-control" data-reactid=".2erxwgtr20w.1.1.0.2.1"><option value="ball-pulse" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-pulse">ball-pulse</option><option value="ball-grid-pulse" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-grid-pulse">ball-grid-pulse</option><option value="ball-clip-rotate" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-clip-rotate">ball-clip-rotate</option><option value="ball-clip-rotate-pulse" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-clip-rotate-pulse">ball-clip-rotate-pulse</option><option value="square-spin" data-reactid=".2erxwgtr20w.1.1.0.2.1.$square-spin">square-spin</option><option value="ball-clip-rotate-multiple" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-clip-rotate-multiple">ball-clip-rotate-multiple</option><option value="ball-pulse-rise" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-pulse-rise">ball-pulse-rise</option><option value="ball-rotate" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-rotate">ball-rotate</option><option value="cube-transition" data-reactid=".2erxwgtr20w.1.1.0.2.1.$cube-transition">cube-transition</option><option value="ball-zig-zag" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-zig-zag">ball-zig-zag</option><option value="ball-zig-zag-deflect" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-zig-zag-deflect">ball-zig-zag-deflect</option><option value="ball-triangle-path" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-triangle-path">ball-triangle-path</option><option value="ball-scale" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-scale">ball-scale</option><option value="line-scale" data-reactid=".2erxwgtr20w.1.1.0.2.1.$line-scale">line-scale</option><option value="line-scale-party" data-reactid=".2erxwgtr20w.1.1.0.2.1.$line-scale-party">line-scale-party</option><option value="ball-scale-multiple" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-scale-multiple">ball-scale-multiple</option><option value="ball-pulse-sync" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-pulse-sync">ball-pulse-sync</option><option value="ball-beat" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-beat">ball-beat</option><option value="line-scale-pulse-out" data-reactid=".2erxwgtr20w.1.1.0.2.1.$line-scale-pulse-out">line-scale-pulse-out</option><option value="line-scale-pulse-out-rapid" data-reactid=".2erxwgtr20w.1.1.0.2.1.$line-scale-pulse-out-rapid">line-scale-pulse-out-rapid</option><option value="ball-scale-ripple" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-scale-ripple">ball-scale-ripple</option><option value="ball-scale-ripple-multiple" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-scale-ripple-multiple">ball-scale-ripple-multiple</option><option value="ball-spin-fade-loader" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-spin-fade-loader">ball-spin-fade-loader</option><option value="line-spin-fade-loader" data-reactid=".2erxwgtr20w.1.1.0.2.1.$line-spin-fade-loader">line-spin-fade-loader</option><option value="triangle-skew-spin" data-reactid=".2erxwgtr20w.1.1.0.2.1.$triangle-skew-spin">triangle-skew-spin</option><option selected="" value="pacman" data-reactid=".2erxwgtr20w.1.1.0.2.1.$pacman">pacman</option><option value="ball-grid-beat" data-reactid=".2erxwgtr20w.1.1.0.2.1.$ball-grid-beat">ball-grid-beat</option><option value="semi-circle-spin" data-reactid=".2erxwgtr20w.1.1.0.2.1.$semi-circle-spin">semi-circle-spin</option></select></div></form></div></div><div class="row" data-reactid=".2erxwgtr20w.2"><div class="col-xs-12" data-reactid=".2erxwgtr20w.2.0"><div class="loaders single" data-reactid=".2erxwgtr20w.2.0.0"><div class="loader-container" data-reactid=".2erxwgtr20w.2.0.0.0"><div class="loader loader-active" data-reactid=".2erxwgtr20w.2.0.0.0.$pacman"><div class="loader-inner pacman" data-reactid=".2erxwgtr20w.2.0.0.0.$pacman.0"><div data-reactid=".2erxwgtr20w.2.0.0.0.$pacman.0.$0"></div><div data-reactid=".2erxwgtr20w.2.0.0.0.$pacman.0.$1"></div><div data-reactid=".2erxwgtr20w.2.0.0.0.$pacman.0.$2"></div><div data-reactid=".2erxwgtr20w.2.0.0.0.$pacman.0.$3"></div><div data-reactid=".2erxwgtr20w.2.0.0.0.$pacman.0.$4"></div></div></div><p data-reactid=".2erxwgtr20w.2.0.0.0.1">pacman</p></div></div></div></div></div></div>
<script src='dist/react-loaders-demo.js'></script>
<script>LoaderDemo.run()</script>
</body>