Simple Lightweight JavaScript SVG Loader Library – Rocket-Loader

Category: Javascript , Loading | July 30, 2018
Author: chrishumboldt
Views Total: 4,423
Official Page: Go to website
Last Update: July 30, 2018
License: MIT


Simple Lightweight JavaScript SVG Loader Library – Rocket-Loader


Rocket-Loader is a simple, lightweight javascript library that uses SVG icons to generate an animated loading spinner on a given container.

All SVG loaders come from SVG-Loaders. You can preview all SVG loaders here.

Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License.

Basic usage:

Include Loaderplate’s JS and CSS files in the document.

<script src="js/loader.js"></script>
<link href="css/loader.min.css" rel="stylesheet">

Create a default loader on the container ‘test’.

var myLoader = Rocket.loader({
    target: '#test',
    body: 'Loader Text'

Remove the loader.

Rocket.event.add('#remove', 'click', () => { myLoader.remove(); });

Customize the loader.

var myLoader = Rocket.loader({

    // color of the loader
    // aqua black blue green grey-blue grey-blue-dark orange pink purple red white yellow
    colour: 'grey-blue',

    // animation delay
    delay: 0,

    // target container
    target: '',

    // appends the loader to the target element as opposed to hiding
    append: false,

    // small, large or medium
    size: 'normal',

    // dots pulse spinner
    type: 'spinner'



  • Refactor
  • Rename

You Might Be Interested In:

Leave a Reply