Bouncing Icon

bouncingIcon brings to your web pages the bouncing icons that KDE shows when launching an application. Some people hated that, but I cracked myself up every time I saw the bouncing icons.

You can use the bouncing icon to provide a visual clue that some loading is happening, for AJAX requests, heavy data processing, etc.

The code is vanilla JavaScript, so no extra libraries are needed. Just include the bouncingIcon.js file in your document and you are ready to go.

But hey... enough of my yakkin'. Whaddaya say, let's boogie!

Demo

You can make the icon follow the mouse pointer, as in KDE.

Or you can make the icon stay on a fixed position.

Installing

Using npm:

$ npm install @koas/bouncing-icon

Using cdn:

<script src="https://unpkg.com/@koas/bouncing-icon@1.0.1/bouncingIcon.js"></script>

How to use it

If you installed it via npm, you should import it first:

import BI from "@koas/bouncing-icon";

To start the bouncing just call

BI.start(imageUrl, position);

imageUrl

Required. The URL of the image that will bounce.

position

Optional. The default value is followCursor. Other accepted values are topLeft, topRight, bottomLeft and bottomRight.

To stop bouncing and remove the icon call

BI.stop();

That's all!

I hope you find this little toy useful. Feel free to fork it or open issues with bugs or suggestions for improvement.

This plugin is free and open source, so you can use it in any project, commercial or not. If you want to support the developer you can donate via PayPal. Thanks!