just-a-throbber

just a throbber. simple throbber/activity indicator with no dependencies

Usage no npm install needed!

<script type="module">
  import justAThrobber from 'https://cdn.skypack.dev/just-a-throbber';
</script>

README

Just A Throbber

Want a way to show the user that important stuff is being done and they should wait? Looking for something simple and lightweight? This is it.

zero dependencies
just css and html
overlay automatically added to dim the background and prevent clicking on other things
easy to get started with and use
drop it at the root of your app and you're able to show and hide it from any place without updating state

Installation

npm install --save just-a-throbber

Usage

import React, { Fragment } from 'react';
import JustAThobber from 'just-a-throbber';

ReactDOM.render(
    <Fragment>
        <JustAThobber throbberType='ropePull' />
        <App />
    </Fragment>,
    document.getElementById('root')
);

then just some simple javascript to call or hide it as you need it:

document.getElementById('JAT-container').style.display = 'block';
API.search(data).then((data) => {
    document.getElementById('JAT-container').style.display = 'none';

    //other awesome code here
});

throbberType
ropePull
theBeat
wackyWaffles
sunflower
dogChasingTail
rightRoundBaby