flare-router
Version:
Blazingly fast SPA-like router for static sites - Pure vanilla JS
38 lines (37 loc) • 1.04 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="../favicon.ico" type="image/png" />
<title>Test Page</title>
<script defer type="module">
import flare from '/flare.js';
flare({ prefetch: 'visible', log: true, pageTransitions: true });
</script>
<style>
#load-bar {
background-color: blue;
position: fixed;
top: 0;
left: 0;
width: 0;
height: 5px;
}
</style>
</head>
<body>
<div id="load-bar"></div>
<h1 id="heading">Test Page</h1>
<a href="/">home</a>
<a href="/about">about</a>
<script>
// test
window.addEventListener('flare:router:fetch-progress', ({ detail }) => {
const loadBar = document.getElementById('load-bar');
loadBar.style.width = detail.progress + '%';
});
</script>
</body>
</html>