WangShuXian6/loading_process.html

## loading_process.html
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>loading</title>
    <style>
        .bg-wrapper {
            z-index: 100;
            opacity: 1;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bg-wrapper.hide {
            z-index: -1;
            opacity: 0;
            transition: all ease-in-out 0.1s;
        }

        .bg {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            width: 100vw;
        }

        .load_sp {
            position: absolute;
            left: -25px;
            top: -52px;
            display: flex;
            width: 58px;
            height: 55px;
        }

        .sway {
            animation: load_sp 0.5s linear infinite alternate;
        }

        .loading-wrapper {
            position: relative;
        }

        .out {
            position: relative;
            display: flex;
            width: 269px;
            height: 10px;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            border: 2px solid #6391BD;
            background-color: #6995C1;
            border-radius: 5px;
        }

        .process {
            margin-left: 1px;
            display: flex;
            /* width: 265px; */
            width: 0px;
            height: 6px;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            border: none;
            background-color: #F8CB00;
            border-radius: 3px;
        }

        .process-text {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            margin-top: 10px;
        }

        @keyframes load_sp {
            from {
                transform: rotate(30deg);
            }

            to {
                transform: rotate(-35deg);
            }
        }
    </style>
</head>

<body>
    <div class='bg-wrapper'>
        <img src="./load_bg.jpg" alt="bg" class='bg'>

        <div class='loading-wrapper'>
            <span class='out'>
                <span class='process'></span>
            </span>
            <img src="./load_sp.png" alt="load_sp" class='load_sp'>
            <text class='process-text'>50%</text>
        </div>
    </div>

    <script>


        onload = () => {
            const loadingWrapperEl = document.querySelector('.bg-wrapper')
            const processEl = document.querySelector('.process')
            const loadingEl = document.querySelector('.load_sp')
            const processTextEl = document.querySelector('.process-text')

            const loading = () => {
                let loadingWidth = 0
                let loadingSPLeft = -25
                let processText = 0
                const widthIncrease = 265 / 100
                loadingEl.classList.add('sway')
                const interval = setInterval(() => {
                    if (loadingWidth >= 265) {
                        loadingEl.classList.remove('sway')
                        clearInterval(interval)
                        return
                    }
                    loadingWidth += widthIncrease
                    loadingSPLeft += widthIncrease
                    processText += 100 / (2000 / 100 * 5)

                    const newWidth = `${loadingWidth}px`
                    const newLoadingSPLeft = `${loadingSPLeft}px`
                    const newProcessText = `${processText}%`
                    processEl.style.width = newWidth
                    loadingEl.style.left = newLoadingSPLeft
                    processTextEl.innerText = newProcessText
                }, 2000 / 100);
            }
            loading()

            const hideLoading = () => {
                loadingWrapperEl.classList.add('hide')
            }

            setTimeout(() => {
                hideLoading()
            }, 5000);
        }

    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="zh-cn">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>loading</title>
	<style>
	.bg-wrapper {
	z-index: 100;
	opacity: 1;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.bg-wrapper.hide {
	z-index: -1;
	opacity: 0;
	transition: all ease-in-out 0.1s;
	}

	.bg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	width: 100vw;
	}

	.load_sp {
	position: absolute;
	left: -25px;
	top: -52px;
	display: flex;
	width: 58px;
	height: 55px;
	}

	.sway {
	animation: load_sp 0.5s linear infinite alternate;
	}

	.loading-wrapper {
	position: relative;
	}

	.out {
	position: relative;
	display: flex;
	width: 269px;
	height: 10px;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	border: 2px solid #6391BD;
	background-color: #6995C1;
	border-radius: 5px;
	}

	.process {
	margin-left: 1px;
	display: flex;
	/* width: 265px; */
	width: 0px;
	height: 6px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: none;
	background-color: #F8CB00;
	border-radius: 3px;
	}

	.process-text {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #fff;
	margin-top: 10px;
	}

	@keyframes load_sp {
	from {
	transform: rotate(30deg);
	}

	to {
	transform: rotate(-35deg);
	}
	}
	</style>
	</head>

	<body>
	<div class='bg-wrapper'>
	<img src="./load_bg.jpg" alt="bg" class='bg'>

	<div class='loading-wrapper'>
	<span class='out'>
	<span class='process'></span>
	</span>
	<img src="./load_sp.png" alt="load_sp" class='load_sp'>
	<text class='process-text'>50%</text>
	</div>
	</div>

	<script>


	onload = () => {
	const loadingWrapperEl = document.querySelector('.bg-wrapper')
	const processEl = document.querySelector('.process')
	const loadingEl = document.querySelector('.load_sp')
	const processTextEl = document.querySelector('.process-text')

	const loading = () => {
	let loadingWidth = 0
	let loadingSPLeft = -25
	let processText = 0
	const widthIncrease = 265 / 100
	loadingEl.classList.add('sway')
	const interval = setInterval(() => {
	if (loadingWidth >= 265) {
	loadingEl.classList.remove('sway')
	clearInterval(interval)
	return
	}
	loadingWidth += widthIncrease
	loadingSPLeft += widthIncrease
	processText += 100 / (2000 / 100 * 5)

	const newWidth = `${loadingWidth}px`
	const newLoadingSPLeft = `${loadingSPLeft}px`
	const newProcessText = `${processText}%`
	processEl.style.width = newWidth
	loadingEl.style.left = newLoadingSPLeft
	processTextEl.innerText = newProcessText
	}, 2000 / 100);
	}
	loading()

	const hideLoading = () => {
	loadingWrapperEl.classList.add('hide')
	}

	setTimeout(() => {
	hideLoading()
	}, 5000);
	}

	</script>
	</body>

	</html>