Мобильная версияКод: Выделить всё
document.addEventListener("DOMContentLoaded", () => {
const loadingScreen = document.getElementById("loading-screen");
const loadingPercentage = document.getElementById("loading-percentage");
const progressPath = document.getElementById("progress-path");
let progress = 0; // Current progress
const minDisplayTime = 1750; // Minimum display time in milliseconds
const fadeDelay = 500; // Duration of fade-out animation (in ms)
const delayAfterComplete = 750; // Delay after hitting 100% (in ms)
const startTime = Date.now(); // Record when loading starts
const totalLength = 360; // Total length of the SVG path
// Set the initial stroke-dasharray and stroke-dashoffset for the white bar
progressPath.style.strokeDasharray = totalLength;
progressPath.style.strokeDashoffset = totalLength;
// Function to update progress
function updateProgress() {
const elapsedTime = Date.now() - startTime;
// Calculate the progress as a percentage based on time
if (elapsedTime < minDisplayTime) {
progress = Math.min((elapsedTime / minDisplayTime) * 100, 100);
} else {
progress = 100; // Ensure progress reaches 100% after minimum display time
}
// Update percentage text
loadingPercentage.textContent = `${Math.floor(progress)}%`;
// Update progress bar position
const offset = totalLength * (1 - progress / 100);
progressPath.style.strokeDashoffset = offset;
console.log(`Loading progress: ${progress}%`);
// Trigger fade-out when progress hits 100%
if (progress === 100) {
const remainingTime = minDisplayTime - elapsedTime; // Ensure minimum display time
setTimeout(() => {
// Add a 0.75-second delay after hitting 100% before starting fade-out
setTimeout(() => {
loadingScreen.style.opacity = "0"; // Trigger fade-out animation
// Completely hide the loading screen after the fade-out
setTimeout(() => {
loadingScreen.style.display = "none";
}, fadeDelay); // Match the CSS transition duration
}, delayAfterComplete); // 0.75-second delay after hitting 100%
}, Math.max(remainingTime, 0)); // Wait for any remaining time if necessary
} else {
// Continue updating progress until it reaches 100%
requestAnimationFrame(updateProgress);
}
}
// Start the progress update loop
updateProgress();
});Код: Выделить всё
#loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #222;
/* Dark background */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
/* Overlay all content */
overflow: hidden;
transition: opacity 0.5s ease;
/* Fade-out effect */
}
/* Logo and percentage container */
#loading-content {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
/* Above the loading bar */
}
/* Logo styling */
#ws-logo {
width: 15%;
max-width: 100px;
height: auto;
margin-bottom: 10px;
}
/* Percentage text styling */
#loading-percentage {
font-size: 1.5em;
color: #fff;
font-family: Arial, sans-serif;
}
/* SVG loading bar */
#loading-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
/* Behind content */
padding: 0;
/* Ensure no internal spacing */
margin: 0;
/* Remove any external margin */
box-sizing: border-box;
/* Include border in dimensions */
}
#loading-bar path {
vector-effect: ;
}
#progress-path {
transition: stroke-dashoffset 0.2s ease-out;
/* Smooth animation for the progress bar */
}Код: Выделить всё
[img]ws-logo.png[/img]
0%
вот CodePen с тем, что я создал: https:// codepen.io/Ramon-117/pen/QwLrxvb
Идея:
панель загрузки будет напоминать рамку серого прямоугольника. По мере загрузки сайта индикатор выполнения будет становиться белым, начиная с правого верхнего угла (0%), вниз к левому нижнему углу (25%), к правому нижнему углу (50%) и вверх к правому верхнему углу ( 75%) и обратно в верхний левый угол (100%).
Проблема:
У меня все работает, кроме ключевой проблемы. . Если высота просмотра больше ширины просмотра, то верхняя и нижняя ширина будут толще, чем левая и правая, и наоборот.
Что я хочу:
Я хочу, чтобы обводка имела одинаковую толщину по всему контуру независимо от размера области просмотра. Я также хочу иметь возможность регулировать толщину с учетом мобильных устройств.
Что я пробовал:
- stroke-width="1" *не работает
- stroke-width="1px" *не работает
- stroke-width="1%" *не работает
- stroke-width="1vmin" *не работает работа
- векторный эффект: немасштабируемый штрих; *разбивает анимацию
- vector-effect:non-scaling-stroke; И векторный эффект: без вращения;
- динамическая установка ширины на основе в области просмотра с помощью JavaScript (у меня больше нет этого кода)
Подробнее здесь: https://stackoverflow.com/questions/793 ... it-uniform
