Loading
Notiflix Loading module can be used to show a loading indicator during a process (Fetch/XHR). Includes 6 types of animated SVG icons: "Standard", "Hourglass", "Circle", "Arrows", "Dots", and "Pulse". An additional type is "Custom", and it can be used with a custom SVG icon.
(A) Import as a Module
import { Loading } from 'notiflix/build/notiflix-loading-aio';(B) Add to an HTML page (Global)
(B1) Loading Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-loading-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>Playground
@param1 {string | Object}: Optional, a message in string format. Or, extending the initialize options with the new options for each loading indicator.@param2 {Object}: Optional, extending the initialize options with new the options for each loading indicator. (If the first parameter has been already used for a message.)Only loading indicatorsLoading.standard();Loading.hourglass();Loading.circle();Loading.arrows();Loading.dots();Loading.pulse();Loading indicator with a messageLoading.standard('Loading...');Only loading indicator with the new optionsLoading.standard({clickToClose: true,svgSize: '19px',});Loading indicator with a message, and the new optionsLoading.standard('Loading...', {backgroundColor: 'rgba(0,0,0,0.8)',});Custom Indicator
Show a custom loading indicator.
Only custom loading indicator (SVG Icon URL)Loading.custom({customSvgUrl: 'https://notiflix.github.io/dir/icon.svg',});Only custom loading indicator (Text-based SVG Code)Loading.custom({customSvgCode: '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">...</svg>',});Custom loading indicator with a messageLoading.custom('Loading...', {customSvgCode: '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">...</svg>',});Change
Changing the message of the indicator if exist.
@param1 {string}: Required, new message in string format.Loading.change('Loading %20');Remove
Remove the indicator if exist.
@param1 {number}: Optional, milliseconds for delaying in number format.Remove immediatelyLoading.remove();Remove after delay => e.g. 1923msLoading.remove(1923);Demo
A loading indicator type can be chosen for the demonstration.