mirror of
https://codeberg.org/ashley/poke.git
synced 2024-11-23 07:38:10 +01:00
add progressbar owo
This commit is contained in:
Ashley
parent
19146f371e
commit
c19a4ea200
1 changed files with 73 additions and 1 deletions
|
|
@ -173,6 +173,26 @@ summary:hover{
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
.video > .info > .title {
|
.video > .info > .title {
|
||||||
color: var(--text-primary) !important;
|
color: var(--text-primary) !important;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -314,6 +334,10 @@ border:solid;
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="app" style="background-color: var(--channel-contents-background);">
|
<div class="app" style="background-color: var(--channel-contents-background);">
|
||||||
|
<div class="progress-container">
|
||||||
|
<div class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="position: inherit;background: red;margin: -1em;">
|
<div style="position: inherit;background: red;margin: -1em;">
|
||||||
<p style="color: black;margin-right: auto;margin-left: auto;width: fit-content;">
|
<p style="color: black;margin-right: auto;margin-left: auto;width: fit-content;">
|
||||||
A magnitude 7.4 earthquake just hit Türkiye's Kahramanmaras province, please donate to the turkish people via: <a href="https://www.kizilay.org.tr/Bagis/BagisYap/215/afet-acil-durum-bagisi" style="color:black">Here </a> | to see latest news check <a href="https://poketube.fun/search?query=turkey+earthquake+news" style="color:black"> poketube</a> or <a href="https://duckduckgo.com/?q=turkey+earthquake&iar=news&ia=news" style="color:black">duckduckgo</a>
|
A magnitude 7.4 earthquake just hit Türkiye's Kahramanmaras province, please donate to the turkish people via: <a href="https://www.kizilay.org.tr/Bagis/BagisYap/215/afet-acil-durum-bagisi" style="color:black">Here </a> | to see latest news check <a href="https://poketube.fun/search?query=turkey+earthquake+news" style="color:black"> poketube</a> or <a href="https://duckduckgo.com/?q=turkey+earthquake&iar=news&ia=news" style="color:black">duckduckgo</a>
|
||||||
|
|
@ -350,6 +374,7 @@ border:solid;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="channel-page" >
|
<div class="channel-page" >
|
||||||
|
|
||||||
<img src="https://t.poketube.fun/t/rep.gif" style="width: 0;visibility: hidden;display:none;" id="discover_main">
|
<img src="https://t.poketube.fun/t/rep.gif" style="width: 0;visibility: hidden;display:none;" id="discover_main">
|
||||||
|
|
@ -464,7 +489,54 @@ P.S : Ur a qt
|
||||||
|
|
||||||
|
|
||||||
<script src="/css/custom-css.js"> </script>
|
<script src="/css/custom-css.js"> </script>
|
||||||
|
<script>
|
||||||
|
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0-or-later
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
let bgs = document.querySelectorAll('[data-bg]');
|
||||||
|
let bgCount = bgs.length;
|
||||||
|
|
||||||
|
function loadBg(index) {
|
||||||
|
let bg = bgs[index];
|
||||||
|
let bgUrl = bg.getAttribute('data-bg');
|
||||||
|
bg.style.backgroundImage = `url(${bgUrl})`;
|
||||||
|
bg.removeAttribute('data-bg');
|
||||||
|
bg.classList.add('loaded');
|
||||||
|
}
|
||||||
|
|
||||||
|
function lazyLoadBg() {
|
||||||
|
for (let i = 0; i < bgCount; i++) {
|
||||||
|
let bg = bgs[i];
|
||||||
|
let bgRect = bg.getBoundingClientRect();
|
||||||
|
if (bgRect.top < window.innerHeight && bgRect.bottom > 0) {
|
||||||
|
loadBg(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
lazyLoadBg();
|
||||||
|
|
||||||
|
window.addEventListener('scroll', lazyLoadBg);
|
||||||
|
window.addEventListener('resize', lazyLoadBg);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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>
|
||||||
</body >
|
</body >
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue