CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, width=device-width"> <meta name="keywords" content="Loading CSS3 animation creator, CSS3 animation, loading animation, ajax, jquery, loading, css loader, css load, CSS3, CSS spinner, CSS bar" /> <meta name="description" content="CSS load - Free loading CSS3 animation generator. Create your loading animations from the pre-made templates" /> <title>CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery</title> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="stylesheet" href="https://cssload.net/css/og-header.css"> <link rel="stylesheet" href="https://cssload.net/css/style.css"> <link rel="stylesheet" href="https://cssload.net/css/slider.css">   <script type="text/javascript"> var lang='en'; </script> <script src="https://cssload.net/js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> var adblock = false; var allowAd=true;</script> <script src="https://cssload.net/js/common.js"></script> <script type="text/javascript" src="https://cssload.net/colorpicker/colorpicker.js"></script> <link rel="stylesheet" href="https://cssload.net/colorpicker/colorpicker.css" type="text/css" /> <script src="https://cssload.net/js/slider.js" type="text/javascript"></script> <script type="text/javascript"> var text = ['Color #']; </script> <link rel="stylesheet" href="https://cssload.net/css/default.css" type="text/css" /> </head> <body itemscope="" itemtype="https://data-vocabulary.org/Review-aggregate"> <meta itemprop="name" content="Loading CSS spinners and bars generator for AJAX & JQuery"/> <meta itemprop="description" content="CSS load - Free loading CSS3 animation generator. Create your loading animations from the pre-made templates"/> <div class="general-header"> <div class="onlinegenerator-header"> <div class="container"> <a href="/ru" class="language_select_link"> 袪褍褋褋泻懈泄</a> <a href="https://blog.cssload.net"> <span>Blog</span> </a> </div> </div> <div class="general-header-container"> <div class="general-project"> <a href="https://icons8.com/preloaders"> <img src="https://cssload.net/images/preloaders-logo.svg" alt="Loading GIF & APNG" /> <span>Loading animations</span> </a> </div> <div class="general-project"> <a href="https://iconizer.net"> <img src="https://cssload.net/images/iconizer-net.svg" alt="Icons search & generator" /> <span>Free icons</span> </a> </div> <div class="general-project"> <a href="https://animizer.net"> <img src="https://cssload.net/images/animizer-net.svg" alt="Animated GIF & APNG tools" /> <span>Animated images</span> </a> </div> <div class="general-project active"> <a href="https://cssload.net"> <img src="https://cssload.net/images/cssload-net.svg" alt="AJAX loaders in pure CSS" /> <span>Loading animations (CSS)</span> </a> </div> <div class="general-project"> <a href="https://csstool.net"> <img src="https://cssload.net/images/csstool-net.svg" alt="CSS objects generator" /> <span>CSS objects generator</span> </a> </div> <div class="general-project"> <a href="https://icons8.com"> <img src="https://cssload.net/images/icons8-com.svg" alt="Free icons library" /> <span>Free icons library</span> </a> </div> <div class="general-project"> <a href="https://blog.icons8.com"> <img src="https://cssload.net/images/icons8-com.svg" alt="Free icons library" /> <span>Graphic Design Tips</span> </a> </div> </div> </div> <header id="header">  </header> <div id="content"> <div class="container"> <div class="wrap"> <h1 style="margin-top:50px">AJAX loaders generator in pure CSS and HTML</h1> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3732773600888178" data-ad-slot="6179933920" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <h3>Select a desired category and generate and/or copy the loader code</h3> <a href="/en/spinners" style="text-decoration:none"> <div class="loader-category" style="background-image:url(/images/categories/circular.png)"> <div class="loader-category-title"> Spinners <span>Spinning loading indicators, or so called "Spinners" in pure CSS and HTML</span> </div> </div> </a> <a href="/en/horizontal-bars" style="text-decoration:none"> <div class="loader-category" style="background-image:url(/images/categories/horizontal-bars.png)"> <div class="loader-category-title"> Horizontal bars <span>Horizontal bar animations run through the means of CSS and HTML</span> </div> </div> </a> <a href="/en/3d-loaders" style="text-decoration:none"> <div class="loader-category" style="background-image:url(/images/categories/3d-loaders.png)"> <div class="loader-category-title"> 3-Dimensional <span>3D animated AJAX loaders in CSS and HTML format</span> </div> </div> </a> <a href="/en/miscellaneous" style="text-decoration:none"> <div class="loader-category" style="background-image:url(/images/categories/miscellaneous.png)"> <div class="loader-category-title"> Miscellaneous <span>Loading animations in CSS and HTML that do not fall into any other category</span> </div> </div> </a> <a href="/en/animated-text" style="text-decoration:none"> <div class="loader-category" style="background-image:url(/images/categories/animated-text.png)"> <div class="loader-category-title"> Animated text <span>Custom text animated with the means CSS and HTML</span> </div> </div> </a> <h2 style="margin-top:50px">Newest CSS loading animations</h2> <div class="loader-preview editable is_common" data-loader-name="spiral" title="spiral"> <div class="loader-overlay"></div>  <iframe src="/previews.php?preloader=spiral" scrolling="no"></iframe> <div class="loader-preview-title">by <a href="https://codepen.io/Terramaster">Nicolas</a></div><div class="editable-ribbon-en"></div> </div><div class="loader-preview editable is_common" data-loader-name="windows8" title="windows8"> <div class="loader-overlay"></div>  <iframe src="/previews.php?preloader=windows8" scrolling="no"></iframe> <div class="loader-preview-title">by <a href="https://cssload.net">CSS load.net</a></div><div class="editable-ribbon-en"></div> </div><div class="loader-preview editable is_common" data-loader-name="fountain" title="fountain"> <div class="loader-overlay"></div>  <iframe src="/previews.php?preloader=fountain" scrolling="no"></iframe> <div class="loader-preview-title">by <a href="https://cssload.net">CSS load.net</a></div><div class="editable-ribbon-en"></div> </div><div class="loader-preview editable is_common" data-loader-name="escaping-ball" title="escaping ball"> <div class="loader-overlay"></div>  <iframe src="/previews.php?preloader=escaping-ball" scrolling="no"></iframe> <div class="loader-preview-title">by <a href="https://cssload.net">CSS load.net</a></div><div class="editable-ribbon-en"></div> </div><div class="loader-preview editable is_common" data-loader-name="fold-unfold" title="fold unfold"> <div class="loader-overlay"></div>  <iframe src="/previews.php?preloader=fold-unfold" scrolling="no"></iframe> <div class="loader-preview-title">by <a href="https://codepen.io/Morningtrain">Morningtrain</a></div><div class="editable-ribbon-en"></div> </div><div class="loader-preview editable is_common" data-loader-name="rainbow-wave" title="rainbow wave"> <div class="loader-overlay"></div>  <iframe src="/previews.php?preloader=rainbow-wave" scrolling="no"></iframe> <div class="loader-preview-title">by <a href="https://codepen.io/mikehobizal">Michael Hobizal</a></div><div class="editable-ribbon-en"></div> </div><div class="loader-preview editable is_common" data-loader-name="color-dots" title="color dots"> <div class="loader-overlay"></div>  <iframe src="/previews.php?preloader=color-dots" scrolling="no"></iframe> <div class="loader-preview-title">by <a href="https://codepen.io/codecalm">Pawe艂 Kuna</a></div><div class="editable-ribbon-en"></div> </div><div class="loader-preview editable is_common" data-loader-name="bubbling" title="bubbling"> <div class="loader-overlay"></div>  <iframe src="/previews.php?preloader=bubbling" scrolling="no"></iframe> <div class="loader-preview-title">by <a href="https://cssload.net">CSS load.net</a></div><div class="editable-ribbon-en"></div> </div><div class="loader-preview editable is_common is_text" data-loader-name="perspective-text" title="perspective text"> <div class="loader-overlay"></div>  <iframe src="/previews.php?preloader=perspective-text" scrolling="no"></iframe> <div class="loader-preview-title">by <a href="https://codepen.io/bennettfeely">Bennett Feely</a></div><div class="editable-ribbon-en"></div> </div><div class="loader-preview editable is_common is_text" data-loader-name="fountain-text" title="fountain text"> <div class="loader-overlay"></div>  <iframe src="/previews.php?preloader=fountain-text" scrolling="no"></iframe> <div class="loader-preview-title">by <a href="https://cssload.net">CSS Load.net</a></div><div class="editable-ribbon-en"></div> </div> <div class="form_wrapper"> <div class="generator_form"> <div class="form_item text_item displaynone" style="width:100%"> <div class="form_item_title">Text to animate</div> <input type="text" class="" value="Loading" id="textToAnimate" style="width: 227px; margin-left:-44px;" /> </div> <div class="clear"></div> <div class="form_item color_item1 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP1" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack1"></div> <div class="slider" id="slider1" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input1" /> </div> <input id="sliderValue5h1" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r1 = new Slider(document.getElementById("slider1"), document.getElementById("slider-input1")); r1.setMinimum(0); r1.setMaximum(100); var ri1 = document.getElementById("sliderValue5h1"); ri1.onchange = function () { r1.setValue(parseInt(this.value)); }; r1.onchange = function () { var cr1 = document.getElementById("color-result"); ri1.value = r1.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r1.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack1").css("background", "#"+hex); $("#colorP1").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP1").ColorPicker(options); }); </script> <div class="form_item color_item2 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP2" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack2"></div> <div class="slider" id="slider2" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input2" /> </div> <input id="sliderValue5h2" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r2 = new Slider(document.getElementById("slider2"), document.getElementById("slider-input2")); r2.setMinimum(0); r2.setMaximum(100); var ri2 = document.getElementById("sliderValue5h2"); ri2.onchange = function () { r2.setValue(parseInt(this.value)); }; r2.onchange = function () { var cr2 = document.getElementById("color-result"); ri2.value = r2.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r2.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack2").css("background", "#"+hex); $("#colorP2").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP2").ColorPicker(options); }); </script> <div class="form_item color_item3 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP3" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack3"></div> <div class="slider" id="slider3" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input3" /> </div> <input id="sliderValue5h3" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r3 = new Slider(document.getElementById("slider3"), document.getElementById("slider-input3")); r3.setMinimum(0); r3.setMaximum(100); var ri3 = document.getElementById("sliderValue5h3"); ri3.onchange = function () { r3.setValue(parseInt(this.value)); }; r3.onchange = function () { var cr3 = document.getElementById("color-result"); ri3.value = r3.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r3.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack3").css("background", "#"+hex); $("#colorP3").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP3").ColorPicker(options); }); </script> <div class="form_item color_item4 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP4" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack4"></div> <div class="slider" id="slider4" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input4" /> </div> <input id="sliderValue5h4" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r4 = new Slider(document.getElementById("slider4"), document.getElementById("slider-input4")); r4.setMinimum(0); r4.setMaximum(100); var ri4 = document.getElementById("sliderValue5h4"); ri4.onchange = function () { r4.setValue(parseInt(this.value)); }; r4.onchange = function () { var cr4 = document.getElementById("color-result"); ri4.value = r4.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r4.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack4").css("background", "#"+hex); $("#colorP4").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP4").ColorPicker(options); }); </script> <div class="form_item color_item5 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP5" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack5"></div> <div class="slider" id="slider5" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input5" /> </div> <input id="sliderValue5h5" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r5 = new Slider(document.getElementById("slider5"), document.getElementById("slider-input5")); r5.setMinimum(0); r5.setMaximum(100); var ri5 = document.getElementById("sliderValue5h5"); ri5.onchange = function () { r5.setValue(parseInt(this.value)); }; r5.onchange = function () { var cr5 = document.getElementById("color-result"); ri5.value = r5.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r5.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack5").css("background", "#"+hex); $("#colorP5").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP5").ColorPicker(options); }); </script> <div class="form_item color_item6 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP6" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack6"></div> <div class="slider" id="slider6" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input6" /> </div> <input id="sliderValue5h6" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r6 = new Slider(document.getElementById("slider6"), document.getElementById("slider-input6")); r6.setMinimum(0); r6.setMaximum(100); var ri6 = document.getElementById("sliderValue5h6"); ri6.onchange = function () { r6.setValue(parseInt(this.value)); }; r6.onchange = function () { var cr6 = document.getElementById("color-result"); ri6.value = r6.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r6.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack6").css("background", "#"+hex); $("#colorP6").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP6").ColorPicker(options); }); </script> <div class="form_item color_item7 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP7" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack7"></div> <div class="slider" id="slider7" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input7" /> </div> <input id="sliderValue5h7" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r7 = new Slider(document.getElementById("slider7"), document.getElementById("slider-input7")); r7.setMinimum(0); r7.setMaximum(100); var ri7 = document.getElementById("sliderValue5h7"); ri7.onchange = function () { r7.setValue(parseInt(this.value)); }; r7.onchange = function () { var cr7 = document.getElementById("color-result"); ri7.value = r7.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r7.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack7").css("background", "#"+hex); $("#colorP7").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP7").ColorPicker(options); }); </script> <div class="form_item color_item8 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP8" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack8"></div> <div class="slider" id="slider8" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input8" /> </div> <input id="sliderValue5h8" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r8 = new Slider(document.getElementById("slider8"), document.getElementById("slider-input8")); r8.setMinimum(0); r8.setMaximum(100); var ri8 = document.getElementById("sliderValue5h8"); ri8.onchange = function () { r8.setValue(parseInt(this.value)); }; r8.onchange = function () { var cr8 = document.getElementById("color-result"); ri8.value = r8.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r8.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack8").css("background", "#"+hex); $("#colorP8").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP8").ColorPicker(options); }); </script> <div class="form_item color_item9 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP9" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack9"></div> <div class="slider" id="slider9" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input9" /> </div> <input id="sliderValue5h9" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r9 = new Slider(document.getElementById("slider9"), document.getElementById("slider-input9")); r9.setMinimum(0); r9.setMaximum(100); var ri9 = document.getElementById("sliderValue5h9"); ri9.onchange = function () { r9.setValue(parseInt(this.value)); }; r9.onchange = function () { var cr9 = document.getElementById("color-result"); ri9.value = r9.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r9.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack9").css("background", "#"+hex); $("#colorP9").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP9").ColorPicker(options); }); </script> <div class="form_item color_item10 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP10" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack10"></div> <div class="slider" id="slider10" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input10" /> </div> <input id="sliderValue5h10" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r10 = new Slider(document.getElementById("slider10"), document.getElementById("slider-input10")); r10.setMinimum(0); r10.setMaximum(100); var ri10 = document.getElementById("sliderValue5h10"); ri10.onchange = function () { r10.setValue(parseInt(this.value)); }; r10.onchange = function () { var cr10 = document.getElementById("color-result"); ri10.value = r10.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r10.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack10").css("background", "#"+hex); $("#colorP10").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP10").ColorPicker(options); }); </script> <div class="form_item color_item11 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP11" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack11"></div> <div class="slider" id="slider11" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input11" /> </div> <input id="sliderValue5h11" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r11 = new Slider(document.getElementById("slider11"), document.getElementById("slider-input11")); r11.setMinimum(0); r11.setMaximum(100); var ri11 = document.getElementById("sliderValue5h11"); ri11.onchange = function () { r11.setValue(parseInt(this.value)); }; r11.onchange = function () { var cr11 = document.getElementById("color-result"); ri11.value = r11.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r11.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack11").css("background", "#"+hex); $("#colorP11").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP11").ColorPicker(options); }); </script> <div class="form_item color_item12 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP12" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack12"></div> <div class="slider" id="slider12" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input12" /> </div> <input id="sliderValue5h12" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r12 = new Slider(document.getElementById("slider12"), document.getElementById("slider-input12")); r12.setMinimum(0); r12.setMaximum(100); var ri12 = document.getElementById("sliderValue5h12"); ri12.onchange = function () { r12.setValue(parseInt(this.value)); }; r12.onchange = function () { var cr12 = document.getElementById("color-result"); ri12.value = r12.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r12.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack12").css("background", "#"+hex); $("#colorP12").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP12").ColorPicker(options); }); </script> <div class="form_item color_item13 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP13" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack13"></div> <div class="slider" id="slider13" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input13" /> </div> <input id="sliderValue5h13" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r13 = new Slider(document.getElementById("slider13"), document.getElementById("slider-input13")); r13.setMinimum(0); r13.setMaximum(100); var ri13 = document.getElementById("sliderValue5h13"); ri13.onchange = function () { r13.setValue(parseInt(this.value)); }; r13.onchange = function () { var cr13 = document.getElementById("color-result"); ri13.value = r13.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r13.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack13").css("background", "#"+hex); $("#colorP13").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP13").ColorPicker(options); }); </script> <div class="form_item color_item14 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP14" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack14"></div> <div class="slider" id="slider14" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input14" /> </div> <input id="sliderValue5h14" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r14 = new Slider(document.getElementById("slider14"), document.getElementById("slider-input14")); r14.setMinimum(0); r14.setMaximum(100); var ri14 = document.getElementById("sliderValue5h14"); ri14.onchange = function () { r14.setValue(parseInt(this.value)); }; r14.onchange = function () { var cr14 = document.getElementById("color-result"); ri14.value = r14.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r14.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack14").css("background", "#"+hex); $("#colorP14").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP14").ColorPicker(options); }); </script> <div class="form_item color_item15 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP15" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack15"></div> <div class="slider" id="slider15" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input15" /> </div> <input id="sliderValue5h15" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r15 = new Slider(document.getElementById("slider15"), document.getElementById("slider-input15")); r15.setMinimum(0); r15.setMaximum(100); var ri15 = document.getElementById("sliderValue5h15"); ri15.onchange = function () { r15.setValue(parseInt(this.value)); }; r15.onchange = function () { var cr15 = document.getElementById("color-result"); ri15.value = r15.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r15.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack15").css("background", "#"+hex); $("#colorP15").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP15").ColorPicker(options); }); </script> <div class="form_item color_item16 displaynone"> <input type="text" class="color_select" maxlength="6" value="000000" id="colorP16" style="position:absolute; left:0; top:0; z-index:1" /> <div class="color_preview" style="background:#000" id="colorPBack16"></div> <div class="slider" id="slider16" style="position:absolute; top:20px; z-index:0;"> <input class="slider-input" id="slider-input16" /> </div> <input id="sliderValue5h16" maxlength="3" class="displaynone" value="100" /> <script type="text/javascript"> var r16 = new Slider(document.getElementById("slider16"), document.getElementById("slider-input16")); r16.setMinimum(0); r16.setMaximum(100); var ri16 = document.getElementById("sliderValue5h16"); ri16.onchange = function () { r16.setValue(parseInt(this.value)); }; r16.onchange = function () { var cr16 = document.getElementById("color-result"); ri16.value = r16.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $("#generateAnimation").click(); } }; $(document).ready(function(){ r16.setValue(100); }); </script> </div> <script type="text/javascript"> $(document).ready(function(){ options={}; options.color="FFFFFF"; options.onChange=function(hsb, hex, rgb){ $("#colorPBack16").css("background", "#"+hex); $("#colorP16").val(hex.toUpperCase()); if(isCommon){ clearTimeout(animationTimeout); animationTimeout = false; animationTimeout = setTimeout("commonAnimationTimeout()", 500); } else{ $('#generateAnimation').click(); } } $("#colorP16").ColorPicker(options); }); </script> <div class="form_item color_one"> <div class="form_item_title">First color</div> <input type="text" class="color_select" maxlength="6" value="000000" id="firstColor" /> <div class="color_preview" style="background:#000" id="firstColorP"></div> </div> <div class="form_item color_two"> <div class="form_item_title">Second color</div> <input type="text" class="color_select" maxlength="6" value="FFFFFF" id="secondColor" /> <div class="color_preview" id="secondColorP"></div> </div> <div class="form_item fixed_sizes" style="margin-right:5px;"> <div class="form_item_title">Width</div> <input type="text" class="sizes" value="128" id="width" /> <div class="size_slider"></div> </div> <div class="form_item fixed_sizes"> <div class="form_item_title">Height</div> <input type="text" class="sizes" value="32" id="height" /> </div> <div class="clear"></div> <div class="form_item" style="width:110px"> <div class="form_item_title">Speed</div> <div class="slider" id="slider"> <input class="slider-input" id="slider-input" /> </div> <input id="sliderValue5h" maxlength="3" class="displaynone" /> <script type="text/javascript"> var r = new Slider(document.getElementById("slider"), document.getElementById("slider-input")); r.setMinimum(1); r.setMaximum(40); var ri = document.getElementById("sliderValue5h"); ri.onchange = function () { r.setValue(parseInt(this.value)); }; r.onchange = function () { var cr = document.getElementById("color-result"); ri.value = r.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $('#generateAnimation').click(); } }; r.setValue(1); function fixSize(){ r.recalculate(); } </script> </div> <div class="form_item" style="width:110px"> <div class="form_item_title">Size</div> <div class="slider" id="slider-size"> <input class="slider-input" id="slider-input-size" /> </div> <input id="sliderValue6h" maxlength="3" class="displaynone" /> <script type="text/javascript"> var rSize = new Slider(document.getElementById("slider-size"), document.getElementById("slider-input-size")); rSize.setMinimum(1); rSize.setMaximum(80); var riSize = document.getElementById("sliderValue6h"); riSize.onchange = function () { rSize.setValue(parseInt(this.value)); }; rSize.onchange = function () { var cr = document.getElementById("color-result"); riSize.value = rSize.getValue(); if (typeof window.onchange == "function") window.onchange(); //new autoGenerate(); if(isCommon){ commonAnimationTimeout(); } else{ $('#generateAnimation').click(); } }; rSize.setValue(39); </script> </div>  <div class="form_item" style="padding:0px; width:100%;"> <a tabindex="5" id="getCode" class="button blue" href="javascript:;">Get code</a> <button type="button" tabindex="5" style="display:none" id="generateAnimation"> <span class="button-text">Generate animation</span> </button> </div> </div> <div class="preview"> <div class="howto"> <div class="left" style="width:400px"><strong>How to create css preloaders</strong> <ul> <li> - Select your css animation template</li> <li> - Set 2 colors of your preloader</li> <li> - Select desired preloader size (sizes are set by constrained proportions)</li> <li> - Choose your animation speed</li> <li> - Set "Yes" in Reverse animation for backwards animation</li> </ul></div> <div class="right b b-middle"> </div> <div style="clear:both"></div> </div> </div> <div class="loading-animation">Loading animation...</div> <div class="preview_back"> <div class="transp"></div> <div class="white"></div> <div class="black"></div> <div class="colorful"></div> </div> <div class="close-generator"></div> </div> <div class="clear"></div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3732773600888178" data-ad-slot="8712041572" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="page-overlay"></div> <div class="code-downloads"> <div class="code-downloads-contents"> <textarea class="html-code"></textarea> <textarea class="css-code"></textarea> <a class="copied-html">Copied...</a> <a class="copied-css">Copied...</a> <a id="copy-html" class="copy-html">Copy HTML</a> <a id="copy-css" class="copy-css">Copy CSS</a> <div class="code-preview"></div> <a id="backToGenerator">« Back to generator</a> <div class="prefixes-list"> <div class="prefix"><input type="checkbox" name="prefixAll" id="prefixAll" checked="checked" /><label for="prefixAll">All</div> <div class="prefix"><input type="checkbox" name="prefixMoz" id="prefixMoz" checked="checked" /><label for="prefixMoz">-moz-</div> <div class="prefix"><input type="checkbox" name="prefixWebkit" id="prefixWebkit" checked="checked" /><label for="prefixWebkit">-webkit-</div> <div class="prefix"><input type="checkbox" name="prefixO" id="prefixO" checked="checked" /><label for="prefixO">-o-</div> <div class="prefix"><input type="checkbox" name="prefixMs" id="prefixMs" checked="checked" /><label for="prefixMs">-ms-</div> <div class="what-is-prefix">?</div> <div class="prefix-explanation"> <strong>The prefixes given are for the following browsers:</strong> <table> <tr> <td style="width:70px"><strong>-moz-</strong></td> <td>Firefox 5+</td> </tr> <tr> <td><strong>-webkit-</strong></td> <td>Google Chrome, Safari 4+, Safari for IPhone, other browsers with webkit prefix</td> </tr> <tr> <td><strong>-o-</strong></td> <td>Opera 12 - 12.10 (not including 12.10)</td> </tr> <tr> <td><strong>-ms-</strong></td> <td>Internet Explorer 10 (initial versions)</td> </tr> <tr> <td><strong>No prefix</strong></td> <td>Opera 12.10+, Internet Explorer 10+, Firefox 3.7+, Safari 4.1+, iOS3.3+, Android 2.4+, Google Chrome</td> </tr> </table> </div> </div> </div> <div class="close-generator"></div> </div> <div class="footer"> <div class="footer-inner"> <div class="copyright"> © 2025 <a href="https://onlinegenerator.net"><span class="og-logo"></span> OnlineGenerator.net</a> </div> <div class="footer-links"> <ul class="footer-nav"> <li><a href="/en/browser_support">Browser support</a></li> <li><a href="/en/contact">Contact us / Advertise</a></li> <li><a href="/en/terms_of_use">Terms of use</a></li> <li><a href="/en/blog">Blog</a></li> <li><a href="https://cssload.net" onclick="target='_blank'">CSSLoad.net</a></li> </ul> <ul class="our-generators"> <li><a href="https://preloaders.net">Preloaders.net</a></li> <li><a href="https://iconizer.net">Iconizer.net</a></li> <li><a href="https://animizer.net">Animizer.net</a></li> <li><a href="https://csstool.net">CSS Tool.net</a></li> </ul> <ul class="follow"> <li><a href="https://www.facebook.com/Preloadersnet" class="facebook" title="Facebook">Facebook</a></li> <li><a href="https://twitter.com/preloadersnet" class="twitter" title="Twitter">Twitter</a></li> <li><a href="https://vk.com/preloadersnet" class="vk" title="VK">VK</a></li> <li><a href="/en/contact" class="email" title="E-mail">E-mail</a></li> </ul> </div> <div class="footer-social"> <div class="share"> <script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=59e8e30b4817080011875b44&product=inline-share-buttons"></script> <div class="sharethis-inline-share-buttons"></div> </div> <meta itemprop="rating" content="5.0"> <span itemprop="rating" itemscope="" itemtype="https://data-vocabulary.org/Rating"> <meta itemprop="value" content="5.0"> <meta itemprop="best" content="5"> </span> <div class="rating"> Rate page: <div class="rating-star filled" data-rating="1"></div> <div class="rating-star filled" data-rating="2"></div> <div class="rating-star filled" data-rating="3"></div> <div class="rating-star filled" data-rating="4"></div> <div class="rating-star filled" data-rating="5"></div> <span class="orig-rating">5.0</span>/<span>5</span> - <span itemprop="votes">1</span> votes </div> </div> <div> </div> </div> </div> <div class="full_overlay"></div> <div class="dialog_box"> <div class="dialog_header"> <div class="close"></div> <a tabindex="5" class="download_button copy left button blue" href="javascript:;">Select all</a> <div class="prefixes"> <span>Include prefixes:</span> <input type="checkbox" class="prefix_checkbox" value="-moz-" id="prefixMozilla" checked="checked" /><label for="prefixMozilla"> -moz-</label> <input type="checkbox" class="prefix_checkbox" value="-webkit-" id="prefixWebkit" checked="checked" /><label for="prefixWebkit"> -webkit-</label> <input type="checkbox" class="prefix_checkbox" value="-o-" id="prefixOpera" checked="checked" /><label for="prefixOpera"> -o-</label> <input type="checkbox" class="prefix_checkbox" value="-ms-" id="prefixMicrosoft" checked="checked" /><label for="prefixMicrosoft"> -ms-</label> <input type="checkbox" class="prefix_checkbox" value="" id="prefixNoPrefix" checked="checked" /><label for="prefixNoPrefix"> No prefix</label> <div class="what_is_prefix">?</div> <div class="prefix_explanation"> <strong>The prefixes given are for the following browsers:</strong> <table> <tr> <td style="width:70px"><strong>-moz-</strong></td> <td>Firefox 5+</td> </tr> <tr> <td><strong>-webkit-</strong></td> <td>Google Chrome, Safari 4+, Safari for IPhone, other browsers with webkit prefix</td> </tr> <tr> <td><strong>-o-</strong></td> <td>Opera 12 - 12.10 (not including 12.10)</td> </tr> <tr> <td><strong>-ms-</strong></td> <td>Internet Explorer 10 (initial versions)</td> </tr> <tr> <td><strong>No prefix</strong></td> <td>Opera 12.10+, Internet Explorer 10+, Firefox 3.7+, Safari 4.1+, iOS3.3+, Android 2.4+, Google Chrome</td> </tr> </table> </div> </div> <div class="clear"></div> </div> <div class="dialog_content" id="dialog_content"></div> </div> <div class="bottom-a"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3732773600888178" data-ad-slot="1436186780" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="close"></div> </div> </body> </html>

CINXE.COM

CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery