Back Toggle to Dark Mode



Load new content

Source of exampleCopy to clipboard

const loadContentButton = document.getElementById('loadContentButton');
const bar = new AvalynxLoader('.startLoader');
bar.load = true;

const flex1= document.getElementById('flex1');
const loader1 = new AvalynxLoader('#flex1');
const flex2= document.getElementById('flex2');
const loader2 = new AvalynxLoader('#flex2');
const flex3= document.getElementById('flex3');
const loader3 = new AvalynxLoader('#flex3');

setTimeout(() => {
    loadContentButton.disabled = false;
    bar.load = false;
}, 10000);

loadContent = function() {
    loadContentButton.disabled = true;

    loader1.load = true;
    setTimeout(() => {
        flex1.innerHTML = 'Flex 1 loaded content';
        loader1.load = false;
    }, 5000);

    loader2.load = true;
    setTimeout(() => {
        flex2.innerHTML = 'Flex 2 loaded content';
        loader2.load = false;
    }, 3000);

    loader3.load = true;
    setTimeout(() => {
        flex3.innerHTML = 'Flex 3 loaded content<br/><br/>Line';
        loader3.load = false;
        loadContentButton.disabled = false;
    }, 7000);

}
	

AvalynxLoader on GitHub Avalynx on GitHub