FreezeUI is a dead simple, responsive, vanilla javascript loading plugin. No jQuery required.
Demo and examples: alex-radulescu.com/freeze-ui
Add the css and the script to your project:
<html>
<head>
...
<link href="/path/to/freeze-ui.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
...
<script src="/path/to/freeze-ui.min.js" type="text/javascript"></script>
</body>
</html>// Freeze the UI
FreezeUI();
// Un Freeze the UI
UnFreezeUI();You can set some options when calling the FreezeUI function.
| Param | Type | Default | Details |
|---|---|---|---|
| text | string |
Loading | The text to be displayed. |
| selector | string |
of the document | The loading can be applied only to an element, as long as the element has position absolute or fixed. |
FreezeUI(); // To simply freeze the whole page
FreezeUI({ text: 'Custom text' }); // Freeze with a custom text
FreezeUI({ selector: '.class-name' }); // Freeze a certain component.
FreezeUI({ selector: '#id-name' }); // The component must have position: fixed or absolute to work
FreezeUI({ selector: '.component', text: 'Getting there...' }) // Using both options at the same time.
UnFreezeUI(); // Will unfreeze any and all options from aboveFreezeUI is under MIT licence
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent