Skip to content

s780609/archer-loader

Repository files navigation

archer-loader

description

a simple javascript UI loader
It will display a rotating 1/4 colored circle, and produce a background div to cover the screen.

image:
v1.1.2

v1.1.4

Install

npm install archer-loader

method

show()

display the loader when use show() can also use parameters to change color, speed, or text
sample code:

loader.show("#255AC4", 1.5, "Loading...");

parameters are as below

parameters type description
color string color code (change color of the circle and text's background)
speed number speed of loader (seconds)
text string display text under rotating circle

close()

close the loader
sample code:

loader.close();

Useage

In create-react-app, vue-cli, or angular project

first, import loader

import loader from 'archer-loader';

then use show() method to display the loader

loader.show();

Also can use parameters to add color, text , and change speed as below

loader.show("#255AC4", 1.5, "Loading...");

when don't want the loader display, use close() to close the loader

Use UNPKG's CDN

example: use dist folder

    <script src="https://unpkg.com/[email protected]/dist/archer-loader.cdn.js">
    </script>
    <script>
        loader.show("#5D1000", 2.5, "123");
        //loader.close();
    </script>

Also can use a previous version, just cahnge the @[version] block.
An example using 1.1.2 version

<script src="https://unpkg.com/[email protected]/dist/archer-loader.cdn.js"></script>

Releases

No releases published

Packages

No packages published