使用html javascript css创建一个网页loading

最新推荐文章于 2024-08-02 16:29:51 发布
最新推荐文章于 2024-08-02 16:29:51 发布
阅读量993 收藏
点赞数
文章标签： html javascript css 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzheng012019/article/details/121532157
版权

先附上代码
css

 @import url(https://fonts.googleapis.com/css?family=Open+Sans);
 .hhh{
	position: absolute;
	left:50%;
	-webkit-transform:translateX(-50%);
			transform: translateX(-50%);
}
 .load{
	position: relative; /*因为子元素需要绝对定位，为了以load为参照物，将其定位设为relative*/
	margin: 100px auto;
	width: 200px;
	height: 160px;
}
.gear {
    position: absolute;
    z-index: -20;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 5s infinite;
            animation: spin 5s infinite;
}
.second {
    left: 80px;
    /* top: 16px; */
    width: 160px;
    height: 160px;
    -webkit-animation: spin-reverse 5s infinite;
            animation: spin-reverse 5s infinite;
}
.third {
    top: 90px;
    left: -20px;
    width: 120px;
    height: 120px;
}
@-webkit-keyframes spin {
    50% {
        transform: rotate(360deg);
    }
}
@keyframes spin {
    50% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes spin-reverse {
    50% {
        transform: rotate(-360deg);
    }
}
@keyframes spin-reverse {
    50% {
        transform: rotate(-360deg);
    }
}
.lil-circle {
    position: absolute;
    border-radius: 50%; /*形成圆形*/
    box-shadow: inset 0 0 20px 4px gray, 0 0 100px #fff;
    width: 200px;
    height: 200px;
    opacity: 0.65;
}
.blur-circle {
    position: absolute;
    /* background-color:#b8a49b; */
    width: 280px;
    height: 280px;
    top: -38px;
    left: -38px;/* 为负值：在边界的左边*/
}
.text {
    color: lightgray;
    font-size: 36px;
    font-family: "Open Sans", sans-serif;
    text-align: center;
}

.circle{
    position: absolute;
    z-index: -10000;
}

javascript

//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
    _PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
    _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
//在页面未加载完毕之前显示的loading Html自定义内容
//呈现loading效果
var _LoadingHtml ='<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:100%;top:0;background:white;opacity:1;filter:alpha(opacity=80);z-index:10000;">    <div class=\'hhh\'>  <div class=\'load\'>      <div class=\'gear first\'>       <svg id=\'purple\' viewbox=\'0 0 100 100\' fill=\'#afb4db\'>        <path d=\'m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z\'></path>       </svg>      </div>      <div class=\'gear second\'>       <svg id=\'pink\' viewbox=\'0 0 100 100\' fill=\'#FFB5C5\'>        <path d=\'m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z\'></path>       </svg>      </div>      <div class=\'gear third\'>       <svg id=\'orange\' viewbox=\'0 0 100 100\' fill=\'#fedcbd\'>        <path d=\'m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z\'></path>       </svg>      </div>      <!-- 绘制圆形水珠 -->     <div class=\'lil-circle\'></div>     <svg class=\'blur-circle\' >      <filter id=\'blur\'>       <fegaussianblur in=\'SourceGraphic\' stddeviation=\'13\'></fegaussianblur>      </filter>      <circle cx=\'140\' cy=\'140\' r=\'132\' fill=\'transparent\' stroke=\'white\' stroke-width=\'40\' filter=\'url(#blur)\'></circle>     </svg>    </div>          <!-- 文字 -->    <div class=\'text\'>Loading</div></div></div>';   
document.write(_LoadingHtml);
//window.onload = function () {
//    var loadingMask = document.getElementById('loadingDiv');
//    loadingMask.parentNode.removeChild(loadingMask);
//};


//监听加载状态改变
document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果
function completeLoading() {
    if (document.readyState == "complete") {
        var loadingMask = document.getElementById('loadingDiv');
        loadingMask.parentNode.removeChild(loadingMask);
    }
}

在javascript中是将原来loading界面的html代码进行了javascript字符串格式转换，将其值赋予var _LoadingHtml，具体转换可以搜索一些格式转换器使用
附原html代码

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>加载动画</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
	<link rel="stylesheet" href="加载动画.css">
</head>
<body>
	<!-- 绘制齿轮 -->
	<div class="load">
		<div class="gear first">
			<svg id="purple" viewbox="0 0 100 100" fill="#afb4db">
				<path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z"></path>
			</svg>
		</div>
		<div class="gear second">
			<svg id="pink" viewbox="0 0 100 100" fill="#FFB5C5">
				<path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z"></path>
			</svg>
		</div>
		<div class="gear third">
			<svg id="orange" viewbox="0 0 100 100" fill="#fedcbd">
				<path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z"></path>
			</svg>
		</div>
		<!-- 绘制圆形水珠 -->
	<div class="lil-circle"></div>
	<svg class="blur-circle" >
		<filter id="blur">
			<fegaussianblur in="SourceGraphic" stddeviation="13"></fegaussianblur>
		</filter>
		<circle cx="70" cy="70" r="66" fill="transparent" stroke="white" stroke-width="40" filter="url(#blur)"></circle>
	</svg>
</div>
		
<!-- 文字 -->
<div class="text">Loading</div>
</body>
</html>

使用方法
将js和css插入html网页的段即可
由于我是在igem官网上编写的 可能调用的格式不太一样（将css和js存成了页面）。
可以直接参考引用css和js文件的格式即可

 <link href="https://2021.igem.org/wiki/index.php?title=Template:BNU-China/css/loading4&action=raw&ctype=text/css" type="text/css" rel="stylesheet" />
 <script src="https://2021.igem.org/wiki/index.php?title=Template:BNU-China/js/loading4&action=raw&ctype=text/javascript"></script>

最终效果
在这里插入图片描述

参考教程https://blog.csdn.net/haibo0668/article/details/52955078
我们的igem网址2021 BNU-China

六六fan
关注
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
努力是为了站在万人之中，成为别人的光
07-25 4万+
今天我将使用 Wea​​ther 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序 ⛅ Weather.io ☔⚓ 第 1 步 - 设置环境并收集所有资源 第 2 步 - 从 index.html 开始 第 3 步 - 设置索引文件的样式 第 4 步 - 获取 Weather API 和 Unsplash API 密钥 第 5 步 - 从 JavaScript 编码开始 第 6 步 - 免费托管您的网站！
制作一个“loading“文字动画通常涉及使用HTML、CSS和JavaScript
BLOG域名:programb.blog.csdn.net
07-13 342
在上面的例子中，CSS使用@keyframes定义了一个名为loading-animation的动画，该动画将文本在垂直方向上移动，并改变其透明度，从而创建了一个简单的"跳动"效果。在这个阶段，制作团队会创建故事板（Storyboard），这是一种视觉化的剧本，展示了动画的每一帧应该如何呈现。后期合成和特效：在这个阶段，所有的动画帧会被组合在一起，添加特效和音效，形成一个完整的动画片段。总的来说，动画的制作是一个复杂的过程，需要多个部门和人员的协同工作。通过不断的迭代和优化，才能制作出高质量的动画作品。
html javascript js制作加载进度条.loading
01-28
html js制作加载进度条.zip
Html5 loading 来了
weixin_34179968的博客
12-19 576
Html5在移动设备上表现抢眼，几乎所有稍微高端一点的设备（乔帮主的iPad，iPhone和Andriod的平板手机等）的浏览器都支持Html5。而且据我个人的测试这些支持html5的设备对canvas标签的支持是相当的好。 所以就看了一点html5的东东，并研究了一下canvas标签的用法。如果你从来没有用过canvas标签，请参考Html5 canvas cheat sheet。 大家都知...
button点击事件loading，显示的慢
最新发布
u013994400的博客
08-02 231
点击按钮后，更改loading状态，界面反馈上还需要1s左右才能进入loading状态。保存过程中存在一些耗时的动作，因此需要引入定时器来保证用户点击的时候有足够快的反馈。
Html5添加小巧的自定义页面加载loading指示器插件教程
weixin_33750452的博客
01-07 207
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML实现一个非常好用的Loading效果一
资深php_web工程师
12-22 852
今天在网上冲浪时发现一些非常好看的加载组件库
JS实现loading效果（不需要引入任何文件，一个html，几行代码。）
06-18
没有积分可以私我邮箱liurui416@qq.com,我看到发给你。 JavaScript实现loading效果，拿过去就能够直接使用。
javascript实现一个网页加载进度loading
11-26
在JavaScript中实现一个网页加载进度loading，主要是为了提供一种视觉反馈，让用户在页面内容完全加载之前知道页面正在处理。这通常涉及到对HTML、CSS和JavaScript的综合运用，以创建一个吸引人的过渡效果，并准确地...
CSS实现一个简单loading动画效果
09-24
这里，我们创建了一个半透明的圆环，通过`border`属性设置了不同颜色的边框，`animation`属性中的`loading1`是关键帧动画的名称，`linear`表示线性速度曲线，使得整个旋转过程速度均匀。 最后，loading3展示了一个...
loading.js
coolform最轻量级的PHP开发框架
01-10 351
function loadingShow(){ var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为
JavaScript Loading动画
04-05
HTML5 Loading动画，采用TweenMax制作
基于javascript实现页面加载loading效果
10-22
主要介绍了基于javascript实现页面加载loading效果的相关资料，感兴趣的小伙伴们可以参考一下
javascript自定义加载loading效果
10-14
主要为大家详细介绍了javascript自定义加载loading效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html添加顶部加载进度条,实现网页顶部加载条loading.html
weixin_39612733的博客
06-05 1510
var NexT = window.NexT || {};var CONFIG = {root: '/',scheme: 'Mist',sidebar: {"position":"left","display":"always","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},fan...
用JavaScript和HTML写出一个简单的loading加载效果插件
黑夜开发者的博客
06-02 330
【代码】用JavaScript和HTML写出一个简单的loading加载插件。
使用html + css制作简易loading
weixin_43090018的博客
01-25 1342
前几天做小程序和后台管理项目的时候，产品说能否换一种loading，官方的不太好看，emmmmmmmmmmmm，那还能怎么办，只能搞了。这里的loading大部分都是基于css实现 1、通过普通的div标签实现 <div class="loading-container"></div> css .loading-container{ width: 50px; /*先将loading区域变成正方形*/ height: 50px;
使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏
10-30 5203
网页使用loading可以给用户带来更好的体验，避免网页渲染中长时间出现网页整体空白从而影响访客的体验，loading在部分大型APP也有在应用。下面使用HTML+CSS+JS实现完整的Loading效果。
html按钮load方法,前端实例练习 - 加载动效按钮
weixin_39954569的博客
06-16 395
加载动效按钮初衷：很多人在初学前端的时候都会问，“如何入门前端？”同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识，实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。希望能够与大家互相分享，共同进步。效果预览HTML 部分从外部调用图标库我在这里使用的 font-awesome 这个图标库添加...
使用JavaScript实现网页加载进度Loading
"这篇文章主要讲解如何使用JavaScript实现一个网页加载进度loading的效果，提供了一种提升用户体验的方法，尤其是在处理大量数据或资源加载时。" 在网页开发中，loading动画常常用于指示用户页面或数据正在加载的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值