Class CanvasLoader
CanvasLoader is a JavaScript UI library that draws and animates circular preloaders using the Canvas HTML object.
A CanvasLoader instance creates two canvas elements which are placed into a placeholder div (the id of the div has to be passed in the constructor). The second canvas is invisible and used for caching purposes only.
If no id is passed in the constructor, the canvas objects are paced in the document directly.
Constructor
CanvasLoader
(
id
,
opt
)
- Parameters:
-
id
<String>
The id of the placeholder div
-
opt
<Object>
Optional parameters
Possible values of optional parameters:
- id (String): The id of the CanvasLoader instance
- safeVML (Boolean): If set to true, the amount of CanvasLoader shapes are limited in VML mode. It prevents CPU overkilling when rendering loaders with high density. The default value is true.
Properties
activeId
- protected Number
The active shape id for rendering
can
- protected Object
The div we draw the shapes into
cCan
- protected Object
The canvas we use for caching
cCon
- protected Object
The context of the cache canvas
color
- protected String
The color of the loader shapes in HEX
Default Value: "#000000"
cont
- protected Object
The div we place the canvas object into
cRGB
- protected Object
The color of the loader shapes in RGB
density
- protected Number
The number of shapes drawn on the loader canvas
Default Value: 40
diameter
- protected Number
The diameter of the loader
Default Value: 40
fps
- protected Number
The FPS value of the loader animation rendering
range
- protected Number
The amount of the modified shapes in percent.
ready
- protected Boolean
Tells if the canvas and its context is ready
shape
- protected String
The type of the loader shapes
Default Value: "oval"
speed
- protected Number
The speed of the loader animation
timer
- protected Boolean
Adds a timer for the rendering
Methods
protected
Object
addEl
(
tag
,
par
,
opt
)
Creates a new element with the tag and applies the passed properties on it
- Parameters:
-
tag
<String>
The tag to be created
-
par
<String>
The DOM element the new element will be appended to
-
opt
<Object>
Additional properties passed to the new DOM element
- Returns:
Object
- The DOM element
protected
void
clean
(
)
Cleans the canvas
protected
void
draw
(
)
Draw the shapes on the canvas
String
getColor
(
)
Returns the loader color in a hexadecimal form
Number
getDensity
(
)
Returns the number of shapes drawn on the loader canvas
Number
getDiameter
(
)
Returns the diameter of the loader.
Number
getFPS
(
)
Returns the fps of the loader
Number
getRange
(
)
Returns the modified shape range in percent
protected
void
getRGB
(
color
)
Return the RGB values of the passed color
- Parameters:
-
color
<String>
The HEX color value to be converted to RGB
String
getShape
(
)
Returns the type of the loader shapes
Number
getSpeed
(
)
Returns the speed of the loader animation
void
hide
(
)
Stops the rendering of the loader animation and hides the loader
protected
void
init
(
id
,
opt
)
Initialization method
- Parameters:
-
id
<String>
The id of the placeholder div, where the loader will be nested into
-
opt
<Object>
Optional parameters
Possible values of optional parameters:
- id (String): The id of the CanvasLoader instance
- safeVML (Boolean): If set to true, the amount of CanvasLoader shapes are limited in VML mode. It prevents CPU overkilling when rendering loaders with high density. The default value is true.
void
kill
(
)
Removes the CanvasLoader instance and all its references
protected
void
redraw
(
)
Redraws the canvas
protected
void
reset
(
)
Resets the timer
protected
Object
setAttr
(
el
,
opt
)
Sets the attributes on the element
- Parameters:
-
el
<Object>
The DOM element to add the attributes to
-
opt
<Object>
The attributes
- Returns:
Object
- The DOM element
void
setColor
(
color
)
Sets hexadecimal color of the loader
- Parameters:
-
color
<String>
The default value is '#000000'
protected
Object
setCSS
(
el
,
opt
)
Sets the css properties on the element
- Parameters:
-
el
<Object>
The DOM element to be styled
-
opt
<Object>
The style properties
- Returns:
Object
- The DOM element
void
setDensity
(
density
)
Sets the number of shapes drawn on the loader canvas
- Parameters:
-
density
<Number>
The default value is 40
void
setDiameter
(
diameter
)
Sets the diameter of the loader
- Parameters:
-
diameter
<Number>
The default value is 40
void
setFPS
(
fps
)
Sets the rendering frequency.
This value tells the loader how many times to refresh and modify the canvas in 1 second.
Using the right combination of the setSpeed
and the setFPS
methods allows the users to optimize the CPU usage of the loader whilst keeping the animation on a visually pleasing level.
- Parameters:
-
fps
<Number>
The default value is 24
void
setRange
(
range
)
Sets the amount of the modified shapes in percent.
With this value the user can set what range of the shapes should be scaled and/or faded. The shapes that are out of this range will be scaled and/or faded with a minimum amount only.
This minimum amount is 0.1 which means every shape which is out of the range is scaled and/or faded to 10% of the original values.
The visually acceptable range value should be between 0.4 and 1.5.
- Parameters:
-
range
<Number>
The default value is 1.3
void
setShape
(
shape
)
Sets the type of the loader shapes.
The acceptable values are:
- 'oval'
- 'spiral'
- 'square'
- 'rect'
- 'roundRect'
- Parameters:
-
shape
<String>
The default value is 'oval'
void
setSpeed
(
speed
)
Sets the speed of the loader animation.
This value tells the loader how many shapes to skip by each tick.
Using the right combination of the setFPS
and the setSpeed
methods allows the users to optimize the CPU usage of the loader whilst keeping the animation on a visually pleasing level.
- Parameters:
-
speed
<Number>
The default value is 2
void
show
(
)
Shows the rendering of the loader animation
protected
void
tick
(
)
Renders the loader animation
protected
void
transCon
(
x
,
y
,
r
)
Transforms the cache canvas before drawing
- Parameters:
-
x
<Object>
The canvas context to be transformed
-
x
<Number>
x translation
-
y
<Number>
y translation
-
r
<Number>
Rotation radians