A JavaScript library to progressively highlight any text on a page.

Great for when you want users to pay attention to some important text.
It can also be used to show progress of a task − Read something while tasks are being completed.

Related buzz words: Tiny (~1kB gzipped), No-dependency

Visit lumin.rocks to see it in action.

Note: This does NOT modify the user selection.

Download the latest from dist folder

or from npm:

npm install --save lumin

Instantiate lumin with a node. All text under that node, including child nodes, will be highlighted. Then call start to start highlighting.

const luminator = lumin(domNode);
luminator.start(5000); // 5000ms to highlight

Or you can manually control the progress

// Set progress to 50%
luminator.progress = 50;

Note: The node being instantiated with has to be a positioned node. i.e. position is not static for this to work. In most cases, position:relative will do the trick.

Numeric property one can set to indicate the progress of the highlight. The value is in percentage (0 to 100). This is useful when showing a progress of a task, e.g., a file upload.

Start the highlight.

duration is the approximate time in milliseconds the highlighting should take.

returns a Promise which is resolved when the highlight ends. The resolved value is true if the animation ends without interruption; false if stop was called.

Stops highlighting if it's in progress.

Clears the highlighting.

See it live in action on lumin.rocks or view sample code in the Examples folder.

MIT License (c) Preet Shihn