wmantly/lxc_manager_node
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity
lxc_manager_node/public/images/load.gif
wmantly 9ce292e020 first
2016-01-29 14:49:03 -05:00

24 lines
18 KiB
Plaintext
Raw Blame History

<!DOCTYPE html><html lang="en"><head prefix="og: http://ogp.me/ns#"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><title>loading.io - Your SVG + GIF Ajax Loading Icons</title><meta property="og:locale" content="zh_TW"><meta property="og:image" content="http://loading.io/icons/gears/main.png"><meta property="og:image:type" content="image/svg+xml"><meta property="og:image:width" content="64"><meta property="og:image:height" content="64"><meta property="og:type" content="website"><meta property="og:url" content="http://loading.io/loader/?key=undefined"><meta property="og:title" content="loading.io - Your SVG + GIF Ajax Loading Icons"><meta property="og:description" content="A customized 'gears' loading icon built with loading.io, in SVG / CSS / GIF format"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@loadingio"><meta name="twitter:title" content="loading.io - Your SVG + GIF Ajax Loading Icons"><meta name="twitter:description" content="A customized 'gears' loading icon built with loading.io, in SVG / CSS / GIF format"><meta name="twitter:creator" content="@loadingio"><meta name="twitter:image" content="http://loading.io/icons/gears/main.png"><link rel="icon" type="image/x-icon" href="/assets/img/favicon.png"><link rel="stylesheet" type="text/css" href="/assets/bootstrap/3.3.5/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="/assets/fontawesome/4.3.0/css/font-awesome.min.css"><script type="text/javascript" src="/assets/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="/assets/d3js/3.3.11/d3.v3.min.js"></script><script type="text/javascript" src="/assets/angular/1.3.15/angular.min.js"></script><script type="text/javascript" src="/assets/bootstrap/3.3.5/js/bootstrap.min.js"></script><link rel="stylesheet" type="text/css" href="/css/index.css?26"><link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/einojbmllcjnkcapgajdbjjnpibkjnhh"><script type="text/javascript" src="/global"></script><script type="text/javascript" src="/js/index.js"></script><script type="text/javascript" src="/assets/clipboard/1.3.1/clipboard.min.js"></script></head><body ng-app="loadingIO" ng-controller="ldMain" id="iconview"><div id="nav-top"><nav role="navigation" class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><a href="/" class="navbar-brand">LOADING.IO</a></div><div><ul class="nav navbar-nav"><li id="nav-loader"><a href="/">LOADER</a></li><li id="nav-palette" class="dropdown"><a data-toggle="dropdown">PALETTE <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="/color/">Editor</a></li><li><a href="/color/random/">Random</a></li></ul></li></ul><ul ng-cloak class="nav navbar-nav pull-right"><li ng-show="!user.data"><a id="nav-login" href="#" ng-click="auth.show=!!!auth.show"><i class="fa fa-sign-in"></i>&nbsp; <span>LOGIN / SIGNUP</span></a></li><li id="nav-profile" ng-show="user.data" class="dropdown"><div data-toggle="dropdown" class="btn"><div ng-attr-style="background-image:url({{user.data.avatar || '/assets/img/avatar.png'}})" class="avatar"></div><span class="caret"></span></div><ul class="dropdown-menu"><li><a href="/me/">Profile</a></li><li><a href="/me/edit/">Setting</a></li><li class="divider"></li><li><a href="#" ng-click="auth.logout()">Logout</a></li></ul></li><li class="heart"><a href="#">&#x2764;</a></li></ul></div></div></nav></div><div id="authpanel-outer" ng-class="{'active':auth.show || auth.stick}"><div id="authpanel-inner"><div ng-show="!auth.stick" ng-click="auth.show=!!!auth.show" class="close-btn"><i class="glyphicon glyphicon-remove"></i></div><div class="title">LOADING.IO</div><div class="form"><a ng-attr-href="/u/auth/facebook?nexturl={{nexturl}}" class="btn btn-primary btn-block">Login With Facebook</a><br><div class="or"></div><br><div ng-show="auth.failed" ng-cloak class="error">{{auth.failed}}</div><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text" ng-model="auth.email" placeholder="email" ng-keydown="auth.keyHandler($event)" class="form-control"></div><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span><input type="password" ng-model="auth.passwd" placeholder="password" ng-keydown="auth.keyHandler($event)" class="form-control"></div><div ng-click="auth.login()" class="btn btn-danger btn-block"> <span ng-show="auth.model!='signup'">Login</span><span ng-show="auth.model=='signup'">Sign up</span></div><div ng-show="auth.model!='signup'" ng-click="auth.model='signup'" class="hint pull-right">Sign up</div><div ng-cloak ng-show="auth.model=='signup'" ng-click="auth.model='login'" class="hint pull-right">Log In</div><div class="hint hidden">forgot password ?</div></div></div></div><div id="notifications"><div ng-repeat="n in notifications" ng-class="'notify-'+n.type" ng-cloak class="notify">{{n.message}}</div></div><div id="ldColorPicker" class="ldColorPicker bubble border shadow bottom round"></div><div id="icon-root" ng-controller="ldIcon"><div id="icon-saved-hint" role="tooltip" class="tooltip bottom"><div class="tooltip-arrow"></div><div class="tooltip-inner">Browse Saved Loader in Your Profile</div></div><div id="dimmer"><img src="/assets/img/banner.png"></div><div id="icon-share-banner"><div class="title"><span>Build Your Ajax <div class="hidden-xs-inline">Loading </div>Icons with</span><br><span><big>SVG</big><small> / </small><big>CSS</big><small> / </small><big>GIF</big> !</span></div></div><div id="panel" class="share"><div id="icon-making" ng-class="{'invis':!build.making}" class="anim invis"><span ng-if="build.percent&lt;100">Recording</span><span ng-if="build.percent&gt;=100">Generating</span><img src="/assets/img/ellipsis.gif"><br><div ng-cloak class="is">{{build.percent}}%</div></div><div class="row"><div class="col-md-4"><div id="demo-panel" ng-attr-style="background:{{build.cbk || '#fff'}}" ng-class="{'invis':!build.show}" class="invis"></div><div ng-mousemove="build.resize($event)" class="progress progress-striped"><div role="progressbar" ng-attr-aria-valuenow="{{build.size}}" aria-valuemin="0" aria-valuemax="100" ng-attr-style="width:{{16 + (build.size - 5) * 84 / 95}}%;" ng-cloak class="progress-bar">{{2 * build.size}}px</div></div></div><div class="col-md-8"><form><div class="row"><div ng-attr-class="col-sm-{{12 / demoLoader.editableVars.length}}" ng-repeat="v in demoLoader.vars" ng-if="v.type=='color' || v.type=='px' || v.type=='choice'"><div class="form-group"><label ng-cloak>{{v.name}}</label><input ng-if="v.type=='color'" type="text" ng-click="colorpicker.toggle($event)" placeholder="e.g., {{v.placeholder}}" ng-model="build['c'+($index+1)]" class="form-control"><input ng-if="v.type=='px'" type="text" placeholder="e.g., {{v.placeholder}}" ng-model="build['c'+($index+1)]" class="form-control"><select ng-if="v.type=='choice'" ng-model="build['c'+($index+1)]" class="form-control"><option ng-repeat="u in v.values" ng-attr-value="{{u}}" ng-cloak>{{u}}</option></select></div></div></div><div class="row"><div class="col-xs-2"><div class="form-group"><label>speed (s)</label><input typ="text" placeholder="e.g., 1.2" ng-model="build.speed" class="form-control"></div></div><div class="col-xs-2"><div class="form-group"><label>bk color</label><input typ="text" ng-click="colorpicker.toggle($event)" placeholder="e.g., #f00" ng-model="build.cbk" style="padding:6px;text-align:center;" class="form-control"></div></div><div class="col-xs-5"><div class="form-group"><label>Color Schema</label><div id="icon-save-schema" ng-class="{'on':schemaIsCustom}" ng-click="customPal.save()" class="btn btn-default pull-right"><i class="fa fa-save"></i></div><select id="icon-pal-select" class="form-control"></select></div></div><div class="col-xs-3"><div class="form-group"><div class="clearfix"></div><div id="icon-save-hint" role="tooltip" class="tooltip top"><div class="tooltip-arrow"></div><div class="tooltip-inner">Save it <br class="hidden-lg hidden-md"> in your account!</div></div><label>&nbsp;</label><br><div id="icon-linkbtns" class="btn-group"><div id="icon-getlink" ng-click="build.getlink()" class="btn btn-default">link <i class="fa fa-link"></i></div><div id="icon-save" ng-click="build.save()" class="btn btn-default">save <i class="fa fa-save"></i></div></div></div></div></div><div id="icon-build-ctrl" class="form-group text-center"><div id="play" class="btn-group"><div ng-class="{'active':build.running}" ng-click="build.start()" class="btn btn-default">Run<div class="glyphicon glyphicon-play"></div></div><div ng-class="{'active':!build.running}" ng-click="build.stop()" class="btn btn-default">Stop<div class="glyphicon glyphicon-pause"></div></div></div><div id="icon-build-btn" class="btn-group"><div ng-disabled="demoLoader.mode=='gif'" ng-click="build.makesvg()" class="btn btn-default"><span ng-if="demoLoader.mode!='gif'">Get SVG</span><span ng-if="demoLoader.mode=='gif'">SVG N/A</span></div><div ng-disabled="demoLoader.mode!='both'" ng-click="build.makecss()" class="btn btn-default"><span ng-if="demoLoader.mode=='both'">Get CSS</span><span ng-if="demoLoader.mode!='both'">CSS N/A</span></div><div ng-click="build.makegif()" ng-disabled="demoLoader.nogif" class="btn btn-default"><span ng-if="!demoLoader.nogif">Make GIF</span><span ng-if="demoLoader.nogif">GIF N/A</span></div></div></div></form></div></div></div><div id="chooser"><div class="ib"><div ng-repeat="t in build.choices" ng-class="{'active':build.type==t}" class="item"> <div ng-attr-style="background:url(/assets/img/ldIconType.png?26);background-position:{{-t[1]*64}}px 0" ng-click="build.settype(t[0])" class="icon-png"></div><div ng-cloak class="title">{{t[0]}}</div></div><div style="width:180px" class="item"><div class="delay more"><div data-href="http://loading.io" data-layout="button" data-action="like" data-show-faces="true" data-share="true" class="fb-like"></div></div><div class="title">want more? share it!</div></div></div></div><div id="icon-readme"><div class="section color4"><a id="icon-examples" class="hash-anchor"></a><h3 class="tag">Examples</h3><div class="content"><h4>SVG Loader</h4><p>You can use SVG loader just like using an image. For example, with &#60;img&#62; tag:</p><div class="row"><div class="col-sm-6"><div class="code">&#60;img src="triangle.svg"&#62;</div></div><div class="col-sm-6 text-center"><img src="/assets/img/hourglass.svg" style="margin-top:10px"></div></div><p>or as background image:</p><div style="background-image:url(/assets/img/triangle.svg);background-repeat:repeat" class="icon-block-sample"></div><br><br><h4>CSS Loader</h4><p>CSS loader has two parts: <b>stylesheet</b> and <b>HTML part</b>. Stylesheet is embraced in &lt;style&gt; tag so you can copy the file content into the place you want the icon to show.</p><p>To increase reusability, you can separate stylesheet from html part into a standalone css file. For example: </p><div class="code">&#60;link rel="stylesheet" type="text/css" href="examples/battery.css"&#62;
&#60;div class='uil-battery-demo-css' style='-webkit-transform:scale(0.6)'&#62;
&#60;outer&#62;&#60;/outer&#62;
&#60;inner&#62;&#60;/inner&#62;
&#60;inner&#62;&#60;/inner&#62;
&#60;inner&#62;&#60;/inner&#62;
&#60;inner&#62;&#60;/inner&#62;
&#60;/div&#62;</div><p>will look like this:</p><link rel="stylesheet" type="text/css" href="/assets/icon/examples/battery.css"><div style="-webkit-transform:scale(0.6)" class="uil-battery-demo-css"><div class="outer"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><br><h4>GIF Loader</h4><p>Use GIF loader in an &#60;img&#62; tag or as background of another element:</p><div class="code">&#60;img src="spinner.gif"&#62;
&#60;div style="background:url(spinner.gif) no-repeat center center;width:32px;height:32px;"&#62;&#60;/div&#62;</div><p>
For example:</p><div style="background-image:url(/assets/img/default-loader.gif)" class="icon-block-sample"></div><br></div></div><br><div class="section color3"><a id="icon-compatibility" class="hash-anchor"></a><h3 class="tag">Browser Compatibility</h3><div class="content"><h4>tl;dr</h4><p>
Use <b>GIF loader</b> if you need compatibility in<b> Internet Explorer.</b></p><br><h4>SVG Loader <small> ( not for IE )</small></h4><p>All SVG loaders use SMIL to animate elements. Modern browsers support SVG and SMIL except Internet Explorer:<ul><li>SVG: IE &#x2265; 9.0</li><li>SMIL: IE doesn't Support</li></ul></p><br><h4>CSS Loader <small> ( IE &#x2265; 10.0 )</small></h4><p>All CSS loaders use CSS3 Animation to animate elements. Modern browsers support CSS3 except Internet Explorer:<ul><li>CSS3 Animation: IE &#x2265; 10.0</li><li>CSS3 Transform: IE &#x2265; 10.0 (partially)</li></ul></p><br><h4>
GIF Loader <small> ( cross-platform )</small></h4><p>All modern browsers support GIF loader. Use GIF loader to ensure optimized browser compatibility.</p><br></div></div><br><div class="section color2"><a id="icon-about" class="hash-anchor"></a><h3 class="tag">This Tool</h3><div class="content"><p>This tool is tested against following browsers:<ul><li>Google Chrome 34.0.</li><li>Firefox 28.0</li><li>Safari 7.03</li><li>Opera 18.0.</li><li>Internet Explorer 11.0</li></ul></p><p>It's built upon <a href="http://getbootstrap.com">bootstrap</a>, <a href="https://angularjs.org/">angularjs</a>, <a href="https://code.google.com/p/canvg/">canvg</a>, <a href="http://jnordberg.github.io/gif.js/">gif.js</a> and <a href="http://caniuse.com/webworkers">web workers</a>. It's known that some browsers ( e.g., IE10 ) are not supported, so please upgrade your browser if you want to use this tool.</p></div></div><div id="icon-getlink-modal" class="getlink-modal modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><div class="form-group"><input id="icon-getlink-input" ng-model="build.shareLink" type="text" class="form-control"></div><a ng-attr-href="{{build.shareLink}}" target="_blank" class="btn btn-primary btn-sm">Open in New Tab</a><span>&nbsp; </span><div data-clipboard-target="#icon-getlink-input" class="btn btn-primary btn-sm copy">Copy to Clipboard</div><span>&nbsp; </span><a ng-attr-href="http://twitter.com/intent/tweet?url={{build.shareLink}}&amp;hashtags=loadingio" style="padding: 1px 10px 5px" class="btn btn-primary btn-sm">Tweet This <big><i style="margin-top:5px" class="fa fa-twitter"></i></big></a><div data-dismiss="modal" class="btn btn-default btn-sm pull-right">Dismiss</div></div></div></div></div><div id="output-modal" class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" data-dismiss="modal" aria-hidden="true" class="close">&times;</button><h2 class="modal-title">Build Complete!</h2></div><div ng-cloak class="modal-body"><div id="output-box"></div>Here is the requested {{mode}}<div class="glyphicon glyphicon-circle-arrow-up"></div></div><div class="modal-footer"><a id="output-box-link" href="#" ng-cloak class="btn btn-success">Download {{mode}}</a><div data-dismiss="modal" class="btn btn-default">Dismiss</div></div></div></div></div><br><div style="background:rgba(255,255,255,0.8)" class="section color1"><a id="icon-comment" class="hash-anchor"></a><h3 class="tag">Comments</h3><div id="icon-comment-box" class="content"><div class="ib"><div data-href="http://loading.io" data-width="100%" data-numposts="5" data-colorscheme="light" class="fb-comments"></div></div></div></div></div><div id="footer-top"></div><div id="footer"><div class="ib"><a id="eula"> <i class="glyphicon glyphicon-info-sign"></i><span>Term of Use</span></a><a id="pap" href="/privacy.html"><i class="glyphicon glyphicon-info-sign"></i><span>Privacy Policy</span></a><a id="attribution"><i class="glyphicon glyphicon-heart-empty"></i><span>Attribution</span></a><a id="about"><i class="glyphicon glyphicon-globe"></i><span>About Us</span></a><div style="float:right;" data-href="http://loading.io" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true" class="fb-like"></div></div></div><link rel="stylesheet" type="text/css" href="/assets/ldColorPicker/ldcp.css"><link rel="stylesheet" type="text/css" href="/assets/select2/4.0.0/select2.min.css"><script type="text/javascript" src="/assets/ldColorPicker/ldcp.min.js"></script><script type="text/javascript" src="/assets/html2canvas/html2canvas.js"></script><script type="text/javascript" src="/assets/select2/4.0.0/select2.min.js"></script><script type="text/javascript" src="/assets/gifjs/gif.js"></script><script type="text/javascript" src="/assets/rgbcolor/rgbcolor.js"></script><script type="text/javascript" src="/assets/stackblur/StackBlur.js"></script><script type="text/javascript" src="/assets/canvg/canvg.js"></script><script type="text/javascript" src="/js/icon.js?26"></script><script type="text/javascript" src="/js/ldIconType.js?26"></script><link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css"></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-49953904-1', 'loading.io');
ga('send', 'pageview');</script><div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/zh_TW/all.js#xfbml=1&appId=538062799648166";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink