73 lines
2.4 KiB
HTML
73 lines
2.4 KiB
HTML
<!-- Bootstrap Progress Bar -->
|
|
<div class="progress reading-progress-bar" id="reading-progress">
|
|
<div class="progress-bar" role="progressbar"
|
|
style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
|
<span class="progress-label">0%</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- CSS personalizado para que flote encima del navbar y tenga color amarillo -->
|
|
<style>
|
|
.reading-progress-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 20px;
|
|
z-index: 9999;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
/* fondo del contenedor */
|
|
}
|
|
|
|
.reading-progress-bar .progress-bar {
|
|
background-color: #ffc107;
|
|
height: 100%;
|
|
transition: width 0.25s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: black;
|
|
/* Asegúrate que sea visible */
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
|
|
<!-- JavaScript para actualizar la barra -->
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const progressBarContainer = document.getElementById("reading-progress");
|
|
const progressBar = progressBarContainer.querySelector(".progress-bar");
|
|
const postContainer = document.querySelector(".pst-cont");
|
|
|
|
function updateProgress() {
|
|
const scrollTop = window.scrollY;
|
|
const offsetTop = postContainer.offsetTop;
|
|
const postHeight = postContainer.scrollHeight;
|
|
const windowHeight = window.innerHeight;
|
|
|
|
const totalScrollable = postHeight - offsetTop - windowHeight;
|
|
|
|
if (totalScrollable <= 0) {
|
|
progressBarContainer.style.display = "none";
|
|
} else {
|
|
const progress = Math.min((scrollTop - offsetTop) / totalScrollable, 1);
|
|
const progressPercent = progress >= 0 ? progress * 100 : 0;
|
|
progressBar.style.width = `${progressPercent}%`;
|
|
progressBar.setAttribute("aria-valuenow", progressPercent.toFixed(1));
|
|
progressBarContainer.style.display = "block";
|
|
progressBar.style.width = `${progressPercent}%`;
|
|
progressBar.setAttribute("aria-valuenow", progressPercent.toFixed(1));
|
|
progressBar.querySelector(".progress-label").textContent = `${Math.round(progressPercent)}%`;
|
|
}
|
|
}
|
|
|
|
window.addEventListener("scroll", updateProgress);
|
|
window.addEventListener("resize", updateProgress);
|
|
|
|
updateProgress();
|
|
});
|
|
</script>
|