Check with your designers to help you design this section
Check with your designers to help you design this section
Breaking Change: v2.75.0 introduced a raul- class prefix to
dropdown and
loader components. This namespacing
prevents RAUL components from conflicting with non-RAUL components.
Update your markup for these components when moving to 2.75 and later.
When adding loaders it will be most commonly done via the JavaScript API. However, it is possible to add the markup yourself for a more fine grained control. There are many options available to achieve the same goal.
When the entire page is being loaded, the full page loader should be added to the body. With the JavaScript API you have no choice to append it to any other element. Below is the markup example of the full page loader contained within a relative div, but it should be noted that this is for example purposes only.
There is some content here that is being hidden by the page loader
<div class="raul-page-loader-wrapper">
<div class="raul-page-loader"></div>
</div>
This is when content is being loaded
<div class="raul-content-loader-wrapper">
<div class="raul-content-loader"></div>
</div>
The loader JavaScript API provides various methods of adding loaders. The basic simple way
is to create a new instance of RAUL.Loader with desired options, and then
call the #add method on the instance. You can also decide to pass in
a selector to the #add method, which will override the location where your alert
will be appended to.
| Option | Expected | Default | Description |
|---|---|---|---|
target
|
various
string (css selector)
Element
HTMLCollection
|
null
|
The target should be a valid selector where the loader will be
appended. If not supplied in the options you will need to add it
when calling Please note that if multiple results are found for the target, the first found element will be used. |
type
|
string
'page' or 'content'
|
'page'
|
This determines the type of loader that will be added. |
| Method | Syntax | Parameters | Description |
|---|---|---|---|
<constructor>
|
new RAUL.Loader(options)
|
Optional options object (described above)
|
Creates a new Loader instantance. |
#add
|
loader.add([target])
|
Optional target selector as a string, Element, or
HTMLCollection. (If collection is passed only the first found
result will be used).
|
Adds loader to it's target, whether supplied in the options during instantiation, or supplied to this method as an override. |
#remove
|
loader.remove()
|
N/A |
Detaches loader from the dom. |
.template
|
RAUL.Loader.template(templateOptions)
|
Object representing template options: {type = 'page'}.
|
|
.addContentLoader
|
RAUL.Loader.addContentLoader(<target>)
|
Required target selector as a string, Element, or
HTMLCollection. (If collection is passed then a loader will be added to
each element).
|
Adds loader to one or more targets. |
.removeContentLoader
|
RAUL.Loader.removeContentLoader(<target>)
|
Required target selector as a string, Element, or
HTMLCollection. (If collection is passed then a loader will be removed from
each element in collection).
|
Removes loader from one or more targets. |
.removeAllContentLoaders
|
RAUL.Loader.removeAllContentLoaders()
|
N/A |
Removes all content loaders on page. |
.addPageLoader
|
RAUL.Loader.addPageLoader()
|
N/A |
Adds a page loader to the page and skips all the ceremony of having to instantiate a
new |
.removePageLoader
|
RAUL.Loader.removePageLoader()
|
N/A |
Finds and removes the page loader from the page. |
<fn> = contructor method
.fn = class (static) method
#fn = instance method
|
|||