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 highlightOr 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.