CINXE.COM
loading GIF图片生成 loading GIF图片 在线loading图片制作工具 intoGIF
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="renderer" content="webkit"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <title>loading GIF图片生成 loading GIF图片 在线loading图片制作工具 intoGIF</title> <link rel="canonical" href="https://www.intogif.com/loading/"/> <meta name="keywords" content="loading图片,loading GIF图片生成,loading GIF图片,在线loading图片制作工具"> <meta name="description" content="loading图片制作工具提供三十多款在线gif动画制作，能在线修改各loading图片的颜色，背景、动画的速度以及需要下载loading GIF图片的大小，是一款所见即所得的loading GIF图片生成工具。"> <link href="/resource/style/dist/public/common.css?v=201910141800" rel="stylesheet"> <link href="/resource/style/dist/loading/index.css?v=201910141800" rel="stylesheet"> <script type="text/javascript"> var _CONFIG = { 'wwwUrl':'/', 'scriptUrl':'/resource/script/dist/', 'styleUrl':'/resource/style/dist/', 'imageUrl':'/resource/image/' }; </script> </head> <body> <div class="wrapper"> <div class="header"> <div class="mod-head"> <div class="inner"> <h1> <a href="/"><img src="/resource/image/public/logo.png" width="160" height="36" alt="表情图片"></a> </h1> <ul> <li><a href="/biaoqing/" target="_blank">表情制作</a></li> <li class="active"><a href="/loading/" target="_blank">Loading图片</a></li> </ul> <div id="share" class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div> </div> </div> </div> <div class="container"> <div class="inner"> <div class="mod-setting"> <div class="tip"></div> <div class="hd"> <div class="preview"> <canvas id="canvas" width="240" height="240"></canvas> </div> </div> <div class="bd"> <div class="panel"> <div class="row"> <div class="field-name">loading样式</div> <ul> <li> <label for="radio-1-1"> <input id="radio-1-1" type="radio" name="effect" value="default" checked="checked"/> <img src="/resource/image/loading/default.gif" alt="loading图片" width="50" height="50"/> </label> </li> <li> <label for="radio-1-2"> <input id="radio-1-2" type="radio" name="effect" value="ring"/> <img src="/resource/image/loading/ring.gif" alt="" width="50" height="50"/> </label> </li> <li> <label for="radio-1-3"> <input id="radio-1-3" type="radio" name="effect" value="spin"/> <img src="/resource/image/loading/spin.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-4"> <input id="radio-1-4" type="radio" name="effect" value="pacman"/> <img src="/resource/image/loading/pacman.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-5"> <input id="radio-1-5" type="radio" name="effect" value="wheel"/> <img src="/resource/image/loading/wheel.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-6"> <input id="radio-1-6" type="radio" name="effect" value="reload"/> <img src="/resource/image/loading/reload.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-7"> <input id="radio-1-7" type="radio" name="effect" value="ball"/> <img src="/resource/image/loading/ball.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-8"> <input id="radio-1-8" type="radio" name="effect" value="flickr"/> <img src="/resource/image/loading/flickr.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-9"> <input id="radio-1-9" type="radio" name="effect" value="jelly"/> <img src="/resource/image/loading/jelly.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-10"> <input id="radio-1-10" type="radio" name="effect" value="radio"/> <img src="/resource/image/loading/radio.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-11"> <input id="radio-1-11" type="radio" name="effect" value="gear"/> <img src="/resource/image/loading/gear.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-12"> <input id="radio-1-12" type="radio" name="effect" value="gears"/> <img src="/resource/image/loading/gears.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-13"> <input id="radio-1-13" type="radio" name="effect" value="pie"/> <img src="/resource/image/loading/pie.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-14"> <input id="radio-1-14" type="radio" name="effect" value="ringball"/> <img src="/resource/image/loading/ringball.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-15"> <input id="radio-1-15" type="radio" name="effect" value="square-queue"/> <img src="/resource/image/loading/square-queue.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-16"> <input id="radio-1-16" type="radio" name="effect" value="chrome"/> <img src="/resource/image/loading/chrome.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-17"> <input id="radio-1-17" type="radio" name="effect" value="arrow"/> <img src="/resource/image/loading/arrow.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-18"> <input id="radio-1-18" type="radio" name="effect" value="dot-queue"/> <img src="/resource/image/loading/dot-queue.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-19"> <input id="radio-1-19" type="radio" name="effect" value="wave"/> <img src="/resource/image/loading/wave.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-20"> <input id="radio-1-20" type="radio" name="effect" value="slide"/> <img src="/resource/image/loading/slide.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-21"> <input id="radio-1-21" type="radio" name="effect" value="diamond"/> <img src="/resource/image/loading/diamond.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-22"> <input id="radio-1-22" type="radio" name="effect" value="squares"/> <img src="/resource/image/loading/squares.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-23"> <input id="radio-1-23" type="radio" name="effect" value="rolling"/> <img src="/resource/image/loading/rolling.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-24"> <input id="radio-1-24" type="radio" name="effect" value="triangle"/> <img src="/resource/image/loading/triangle.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-25"> <input id="radio-1-25" type="radio" name="effect" value="heart"/> <img src="/resource/image/loading/heart.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-26"> <input id="radio-1-26" type="radio" name="effect" value="dots"/> <img src="/resource/image/loading/dots.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-27"> <input id="radio-1-27" type="radio" name="effect" value="show"/> <img src="/resource/image/loading/show.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-28"> <input id="radio-1-28" type="radio" name="effect" value="comet"/> <img src="/resource/image/loading/comet.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-29"> <input id="radio-1-29" type="radio" name="effect" value="infinity"/> <img src="/resource/image/loading/infinity.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-30"> <input id="radio-1-30" type="radio" name="effect" value="donut"/> <img src="/resource/image/loading/donut.gif" width="50" height="50"/> </label> </li> <li> <label for="radio-1-31"> <input id="radio-1-31" type="radio" name="effect" value="swirl"/> <img src="/resource/image/loading/swirl.gif" width="50" height="50"/> </label> </li> </ul> </div> <div class="row"> <div class="field-name">图案颜色</div> <ul class="colors"l> <li> <label for="radio-2-1"> <input id="radio-2-1" type="color" name="color1" value=""/> </label> </li> <li> <label for="radio-2-2"> <input id="radio-2-2" style="display:none;" type="color" name="color2" value=""/> </label> </li> <li> <label for="radio-2-3"> <input id="radio-2-3" style="display:none;" type="color" name="color3" value=""/> </label> </li> <li> <label for="radio-2-4"> <input id="radio-2-4" style="display:none;" type="color" name="color4" value=""/> </label> </li> </ul> </div> <div class="row"> <div class="field-name">背景颜色</div> <ul> <li> <label for="radio-3-1"> <input id="radio-3-1" type="color" name="backgroundColor" value="#ffffff"/> </label> </li> </ul> </div> <div class="row"> <div class="field-name">背景透明</div> <ul> <li> <label for="radio-3"> <input id="radio-3" type="checkbox" name="isTransparent" value="1" checked/> </label> </li> </ul> </div> <div class="row"> <div class="field-name">动画速度</div> <ul> <li> <label for="radio-4-1"> <input id="radio-4-1" type="number" name="speed" value="1" min="1" max="5" step="1"/> </label> </li> </ul> </div> <div class="row"> <div class="field-name">图片尺寸</div> <ul> <li> <label for="radio-5-1"> <input id="radio-5-1" type="range" name="size" value="240" min="24" max="240" step="1"/> <em>240</em> </label> </li> </ul> </div> <div class="row"> <ul> <li> <button id="reset">重置设置</button> </li> <li> <button id="create">loading图片生成</button> </li> </ul> </div> </div> </div> </div> <div class="mod-intro"> <div class="hd"><h3>loading GIF图片生成介绍</h3></div> <div class="bd"> <p>loading图片制作工具提供三十多款在线gif动画制作，能在线修改各loading图片的颜色，背景、动画的速度以及需要下载loading GIF图片的大小，是一款所见即所得的loading GIF图片生成工具。</p> <p>loading GIF图片生成注意事项</p> <p>1.背景颜色和图案颜色请勿太接近，以免无法看情loading图标，默认背景为透明</p> <p>2.动画速度请勿设置为太大值，不然loading运动的很慢，给人卡顿的感觉</p> <p>3.不支持低端浏览器，如果发现无法使用loading图片制作工具，请更换为高级浏览器（如谷歌、360浏览器等）</p> </div> </div> <div class="mod-mask"> <div class="bd"> <p>图片生成中 <span>0%</span></p> </div> <div class="ft"></div> </div> <div class="mod-dialog"> <div class="view"></div> <p><a class="btn" href="javascript:;" download="javascript:;">下载图片</a></p> </div> </div> </div> <div class="footer"> <div class="mod-foot"> <div class="inner"> <p>Copyright © 2025 intoGIF.com, All Rights Reserved</p> </div> </div> <div class="mod-floatbar"> <a href="#" rel="nofollow">回到顶部</a> </div> </div> </div> <script type="text/javascript" src="/resource/script/dist/lib/jquery.seajs.js"></script> <script type="text/javascript"> window.onload = function(){ seajs.config({ base: _CONFIG['wwwUrl']+'resource/script/dist', paths: { 'modules': _CONFIG['wwwUrl']+'resource/script/dist' }, map: [ [/^(.*?\/script\/(?:src|dist)\/.*?\/.*?\.js$)(?:.*)$/i, '$1?v=201906151145'] ], charset: 'utf-8' }); seajs.use('modules/public/common.js'); seajs.use('modules/loading/index.js'); }; </script> <div class="hide"> <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node67.aizhantj.com:21233/tjjs/?k=7s2mstrb1vh"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </body> </html>