Beloading 0.1 Beta

Submitted by: 
Visitors have accessed this post 790 times.

a customize-able loading screen, based on jQuery UI and Bootstrap

Live Demo

Demo GIF


  • jQuery
  • jQuery UI
  • Bootstrap
  • Font-Awesome


  1. <script src='beloading.js' type='text/javascript'></script>
  2. <script type='text/javascript'>
  3. $(document).ready(function () {
  4. var loader = beloading({
  5. text: 'Loading, please wait ...'
  6. })
  7. });
  8. </script>
  9. </head>


  1. options = {
  2. // options that will be passed and replacements in case not
  3. background: options.background || 'rgba(0, 0, 0, 0.9)', // background color
  4. icon: options.icon || 'fa fa-refresh fa-spin', // takes font awesome icon
  5. text: options.text || 'Behold the Beloading ahead ...', /// text to be displayed while waiting
  6. text_color: options.text_color || 'rgb(255, 255, 255)', // text and icon color
  7. text_font: options.font || 'Georgia, Times, serif', // text font
  8. text_shadow: options.text_shadow || '0 0 30px rgba(255,255,255,0.5)', // text and icon shadow
  9. text_size: options.text_size || '300%', // text and icon size
  10. effect_duration: options.effect_duration * 1000 || 3000, // fade effect duration in seconds
  11. trail: options.trail || 'false' // to add escape button, and cancel on load event
  12. }

Full documentation here

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.