Loading bar for ajax pages

Developer
Daniel Grant
Size
2,464 Kb
Views
10,120
  1. Loading bar for ajax pages Previews
  2. Loading bar for ajax pages HTML Codes
  3. Loading bar for ajax pages CSS Codes
  4. Loading bar for ajax pages JS Codes

How do I make an loading bar for ajax pages?

What is a loading bar for ajax pages? How do you make a loading bar for ajax pages? This script and codes were developed by Daniel Grant on 28 December 2022, Wednesday.

Loading bar for ajax pages Previews
IQ Test

Loading bar for ajax pages - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading bar for ajax pages</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 100;
}
.progress-bar { height: 100%; background: #41b1d6; width: 0;
}
.progress-bar.is-loading { width: 85%; transition: width 1.5s;
}
.progress-bar.is-loaded { width: 100%; transition: width 0.3s;
}
body { padding: 24px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="progress"> <div class="progress-bar"></div>
</div>
<button id="start">Start Loading</button>
<button id="complete">Complete Loading</button> <script src="js/index.js"></script>
</body>
</html>

Loading bar for ajax pages - Script Codes CSS Codes

.progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 100;
}
.progress-bar { height: 100%; background: #41b1d6; width: 0;
}
.progress-bar.is-loading { width: 85%; transition: width 1.5s;
}
.progress-bar.is-loaded { width: 100%; transition: width 0.3s;
}
body { padding: 24px;
}

Loading bar for ajax pages - Script Codes JS Codes

var start_button = document.getElementById('start');
var complete_button = document.getElementById('complete');
var progress_bar = document.getElementsByClassName('progress-bar')[0];
start_button.addEventListener('click', function() { progress_bar.classList.add('is-loading');
});
complete_button.addEventListener('click', function() { progress_bar.classList.remove('is-loading'); progress_bar.classList.add('is-loaded');
});
progress_bar.addEventListener('transitionend', function() { if(progress_bar.classList.contains('is-loaded')) { progress_bar.classList.remove('is-loaded'); }
});
Loading bar for ajax pages - Script Codes
Loading bar for ajax pages - Script Codes
Home Page Home
Developer Daniel Grant
Username djgrant
Uploaded December 28, 2022
Rating 3
Size 2,464 Kb
Views 10,120
Do you need developer help for Loading bar for ajax pages?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel Grant (djgrant) Script Codes
Name
Number input with controls
Responsive Tabs
Touch rem
Zero element inline validation bubble
A Pen by Daniel Grant
Auto expanding input addons
Wireframe solar system
Wireframe Planet
Facebook Paper Theme
Grid crosshairs
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!