CryoUI
A vanilla JavaScript library to freeze certain elements of the user interface.
Documentation
1. Installation
In your HTML page, include the CSS and JavaScript files in the respective sections like shown below.
See the Pen eYZKdPm by Bluecoaster455 (@bluecoaster455) on CodePen.
2. Usage
Here are some examples of CryoUI in action!
Freeze the whole screen by clicking a button (You can freeze without buttons of course!).
See the Pen CryoUI - Freeze the whole page by Bluecoaster455 (@bluecoaster455) on CodePen.
Freeze a specific element in the document using selectors.
See the Pen CryoUI - Freeze an element like a div! by Bluecoaster455 (@bluecoaster455) on CodePen.
Customize your CryoUI div using a template!
See the Pen CryoUI - Customize your CryoUI div with HTML by Bluecoaster455 (@bluecoaster455) on CodePen.
3. Options
Here are the different options you can pass to CryoUI.freeze(). You can change the default options by modifying CryoUI.defaultOptions
- - selector: What element is going to be freezing using a CSS selector.
- - text: The loading text. This is used for the template
- - template: The design around the text, which include everything within the backdrop.
See the Pen CryoUI - Available options by Bluecoaster455 (@bluecoaster455) on CodePen.