add progressbar owo

This commit is contained in:
Ashley 2023-02-26 11:20:43 +00:00
parent 0fa0ad977c
commit aeedfd20b3

View file

@ -126,6 +126,28 @@
font-size: 10px;
}
}
.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
z-index: 9999;
display:none;
background-color: #f2f2f2;
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: purple;
transition: width 0.5s ease-in-out;
}
.comments-area .thumb {
margin-right: 20px;
@ -290,6 +312,10 @@
.auto-play{
display:none !important;
}
.progress-container {
display:none !important;
}
</style>
</noscript>
<% if (video.id == "QrGrOK8oZG8") { %>
@ -345,7 +371,10 @@ text-shadow: 1px 1px #000,1px 1px 0.1px #000;!important;
//--><!]]>
</script>
<div class="app" id="secret-theme" style="color:var(--text-color)">
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<nav>
<div class=left>
@ -1222,6 +1251,22 @@ if (/[?&]autoplay=/.test(location.search)) {
location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>"
}
}
// Get the progress bar and container elements
const progressBar1 = document.querySelector(".progress-bar");
const progressContainer1 = document.querySelector(".progress-container");
// Set the initial width of the progress bar to 0%
progressBar1.style.width = "0%";
progressContainer1.style.display = 'block';
// Attach an event listener to the window object to listen for the 'load' event
window.addEventListener("load", () => {
progressBar1.style.width = "100%";
setTimeout(() => {
progressContainer1.style.display = 'none';
}, 500);
});
</script>
<% if (!optout) { %>