Heartcode

CanvasLoader Creator

Fork me on GitHub

Create, use and share

The Heartcode CanvasLoader Creator is a free online tool which you can use to generate scripted preloaders (spinners or throbblers) for your HTML projects. The Creator is using the CanvasLoader UI Library.

To create your free preloader follow these 2 easy steps:

  1. Customize the preloader (on the left) by changing the settings (below)
  2. Click the 'Download custom CanvasLoader' button to download your example HTML file, or use the code snippet

Have fun!

CanvasLoader settings
  • Diameter:
  • Density:
  • Range:
  • FPS:
  • Speed:
  • Color:
  • Shapes:
  • Background color:

Usage

Your custom snippet:


								

								

									
									success
								

								
								
							

						

						
Heartcode CanvasLoader UI Library

						
The Heartcode CanvasLoader is a lightweight JavaScript UI library, which can be used to create spinners using the HTML5 Canvas object in modern browsers, or VML in older ones.

						
The main advantages of CanvasLoader

						
    
							
  • It uses Canvas in modern browsers and VML for IE6/7/8
    • 
							
  • Flexible and highly customisable
    • 
							
  • Fully transparent and resolution independent
    • 
							
  • No dependencies; No external images or CSS are required
    • 
							
  • Open Source (released under the MIT licence)
    • 
							
  • Only one http request is required per page load, multiple instances can be used at the same time
    • 
							
  • Much smarter than an animated GIF
    • 
						

						
Browser Support

						
Canvas rendering is hardware accelerated in more and more browsers these days, which means smooth animation with minimal CPU usage. CanvasLoader runs best in modern browsers with Canvas support (Canvas mode). It also runs in older IE versions using VML fallback (VML mode). For the full list of supported browsers see the chart below.

						
    
							
  • 
								Internet Explorer 5.5
							
    • 
							
  • 
								Google Chrome 4.0
							
    • 
							
  • 
								Android 2.1
							
    • 
							
  • 
								
      
									
    • 
										Firefox Mobile 4.0
									
      • 
									
    • 
										Firefox 2.0
									
      • 
								
    
							
    • 
							
  • 
								
      
									
    • 
										Apple Safari iOS 3.2
									
      • 
									
    • 
										Apple Safari 3.1
									
      • 
								
    
							
    • 
							
  • 
								
      
									
    • 
										Opera Mobile 10.0
									
      • 
									
    • 
										Opera Mini 5.0
									
      • 
									
    • 
										Opera 9.0
									
      • 
								
    
							
    • 
						

					
						
Downloads, documentation and issue tracking

						
						
						
Changelog

						
Version 0.9 - 23/10/2011

						
    
							
  • VML fallback mode added
    • 
							
  • Instance removing bug fixed, see Issue #4
    • 
							
  • VML Safe mode and autohide feature added
    • 
							
  • Code revision, optimization
    • 
							
  • Shape drawing glitch fixed, see Issue #2
    • 
							
  • Individual shape scaling removed and 'spiral' shape added, see Issue #1
    • 
						

						

						
Version 0.8 - 12/06/2011

						
    
							
  • Initial release
    •