各式各样的css loading，兼容各种浏览器

最新推荐文章于 2022-06-16 16:31:23 发布
最新推荐文章于 2022-06-16 16:31:23 发布
阅读量293 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jstljspservlet/article/details/102842341
版权 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Awesomes Loadings</title>

    <style type="text/css">
        .lds-circle {
            display: inline-block;
            width: 64px;
            height: 64px;
            margin: 8px;
            border-radius: 50%;
            background: red;
            animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
            -webkit-animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
            -o-animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
            -moz-animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        }

        @keyframes lds-circle {
            0%, 100% {
                animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
            }
            0% {
                transform: rotateY(0deg);
                -ms-transform: rotateY(0deg); /* IE 9 */
            }
            50% {
                transform: rotateY(1800deg);
                -ms-transform: rotateY(1800deg); /* IE 9 */
                animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
            }
            100% {
                transform: rotateY(3600deg);
                -ms-transform: rotateY(3600deg); /* IE 9 */
            }
        }

        @-webkit-keyframes lds-circle {
            0%, 100% {
                -webkit-animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); /* Safari 和 Chrome */
            }
            0% {
                -webkit-transform: rotateY(0deg); /* Safari 和 Chrome */
            }
            50% {
                -webkit-transform: rotateY(1800deg); /* Safari 和 Chrome */
                -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); /* Safari 和 Chrome */
            }
            100% {
                -webkit-transform: rotateY(3600deg); /* Safari 和 Chrome */
            }
        }

        /* Firefox */
        @-moz-keyframes lds-circle {
            0%, 100% {
                -moz-animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); /* Firefox */
            }
            0% {
                -moz-transform: rotateY(0deg); /* Firefox */
            }
            50% {
                -moz-transform: rotateY(1800deg); /* Firefox */
                -moz-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); /* Firefox */
            }
            100% {
                -moz-transform: rotateY(3600deg); /* Firefox */
            }
        }

        @-o-keyframes lds-circle {
            0%, 100% {
                -o-animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); /* Opera */
            }
            0% {
                -o-transform: rotateY(0deg); /* Opera */
            }
            50% {
                -o-transform: rotateY(1800deg); /* Opera */
                -o-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); /* Opera */
            }
            100% {
                -o-transform: rotateY(3600deg); /* Opera */
            }
        }
    </style>
</head>

<body>
  <div class="lds-circle"></div>
</body>

</html>


<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Awesomes Loadings</title>

		<style type="text/css">
			.container {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				display: flex;
				display: -webkit-flex;
				align-items: center;
				justify-content: center;
			}
			/* Loading CSS 样式 */
			
			.bg-rotate-loader {
				width: 50px;
				height: 50px;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				border: 5px solid #B8D0FA;
				border-top-color: #0052EC;
				border-radius: 50%;
				animation: loader-rotate 1s linear infinite;
				-webkit-animation: loader-rotate 1s linear infinite;
			}
			
			@keyframes loader-rotate {
				0% {
					transform: rotate(0);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			
			@-webkit-keyframes loader-rotate {
				0% {
					-webkit-transform: rotate(0);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="container">
			<!-- Loading HTML-->

			<div class="bg-rotate-loader"></div>

		</div>
	</body>

</html>


<style type="text/css">
    .lds-default {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

    .lds-default div {
        position: absolute;
        width: 6px;
        height: 6px;
        background: red;
        border-radius: 50%;
        animation: lds-default 1.2s linear infinite;
        -webkit-animation: lds-default 1.2s linear infinite;
    }

    .lds-default div:nth-child(1) {
        animation-delay: 0s;
        -webkit-animation-delay: 0s;
        top: 37px;
        left: 66px;
    }

    .lds-default div:nth-child(2) {
        animation-delay: -0.1s;
        -webkit-animation-delay: -0.1s;
        top: 22px;
        left: 62px;
    }

    .lds-default div:nth-child(3) {
        animation-delay: -0.2s;
        -webkit-animation-delay: -0.2s;
        top: 11px;
        left: 52px;
    }

    .lds-default div:nth-child(4) {
        animation-delay: -0.3s;
        -webkit-animation-delay: -0.3s;
        top: 7px;
        left: 37px;
    }

    .lds-default div:nth-child(5) {
        animation-delay: -0.4s;
        -webkit-animation-delay: -0.4s;
        top: 11px;
        left: 22px;
    }

    .lds-default div:nth-child(6) {
        animation-delay: -0.5s;
        -webkit-animation-delay: -0.5s;
        top: 22px;
        left: 11px;
    }

    .lds-default div:nth-child(7) {
        animation-delay: -0.6s;
        -webkit-animation-delay: -0.6s;
        top: 37px;
        left: 7px;
    }

    .lds-default div:nth-child(8) {
        animation-delay: -0.7s;
        -webkit-animation-delay: -0.7s;
        top: 52px;
        left: 11px;
    }

    .lds-default div:nth-child(9) {
        animation-delay: -0.8s;
        -webkit-animation-delay: -0.8s;
        top: 62px;
        left: 22px;
    }

    .lds-default div:nth-child(10) {
        animation-delay: -0.9s;
        -webkit-animation-delay: -0.9s;
        top: 66px;
        left: 37px;
    }

    .lds-default div:nth-child(11) {
        animation-delay: -1s;
        -webkit-animation-delay: -1s;
        top: 62px;
        left: 52px;
    }

    .lds-default div:nth-child(12) {
        animation-delay: -1.1s;
        -webkit-animation-delay: -1.1s;
        top: 52px;
        left: 62px;
    }

    @keyframes lds-default {
        0%, 20%, 80%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.5);
        }
    }

    /* Safari 和 Chrome */
    @-webkit-keyframes lds-default {
        0%, 20%, 80%, 100% {
            -webkit-transform: scale(1);
        }
        50% {
            -webkit-transform: scale(1.5);
        }
    }

</style>
<div class="lds-default">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>


<style type="text/css">
    .lds-dual-ring {
        display: inline-block;
        width: 80px;
        height: 80px;
    }

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 64px;
        height: 64px;
        margin: 8px;
        border-radius: 50%;
        border: 6px solid red;
        border-color: red transparent red transparent;
        animation: lds-dual-ring 1.2s linear infinite;
        -webkit-animation: lds-dual-ring 1.2s linear infinite;
    }

    @keyframes lds-dual-ring {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes lds-dual-ring {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

</style>
<div class="lds-dual-ring"></div>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Awesomes Loadings</title>

    
    <style type="text/css">
      .container {
        position: absolute;
        top: 0;
        left: 80px;
        bottom: 0;
        right: 0;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }

      /* Loading CSS 样式 */ 
      
      .pacman {
        position: relative;
        transform: scale(1);
      }
      .pacman > div:nth-child(2) {
        -webkit-animation: pacman-balls 1s -0.99s infinite linear;
        animation: pacman-balls 1s -0.99s infinite linear;
      }
      .pacman > div:nth-child(3) {
        -webkit-animation: pacman-balls 1s -0.66s infinite linear;
        animation: pacman-balls 1s -0.66s infinite linear;
      }
      .pacman > div:nth-child(4) {
        -webkit-animation: pacman-balls 1s -0.33s infinite linear;
        animation: pacman-balls 1s -0.33s infinite linear;
      }
      .pacman > div:nth-child(5) {
        -webkit-animation: pacman-balls 1s 0s infinite linear;
        animation: pacman-balls 1s 0s infinite linear;
      }
      .pacman > div:first-of-type {
        width: 0px;
        height: 0px;
        border-right: 25px solid transparent;
        border-top: 25px solid #c2d411;
        border-left: 25px solid #c2d411;
        border-bottom: 25px solid #c2d411;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
        animation: rotate_pacman_half_up 0.5s 0s infinite;
        position: relative;
        left: -30px;
      }
      .pacman > div:nth-child(2) {
        width: 0px;
        height: 0px;
        border-right: 25px solid transparent;
        border-top: 25px solid #c2d411;
        border-left: 25px solid #c2d411;
        border-bottom: 25px solid #c2d411;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
        animation: rotate_pacman_half_down 0.5s 0s infinite;
        margin-top: -50px;
        position: relative;
        left: -30px;
      }
      .pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) {
        background-color: #c2d411;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        width: 10px;
        height: 10px;
        position: absolute;
        -webkit-transform: translate(0, -6.25px);
        transform: translate(0, -6.25px);
        top: 25px;
        left: 70px;
      }
      
      @-webkit-keyframes rotate_pacman_half_up {
        0% {
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
        }
      
        50% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      
        100% {
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
        }
      }
      
      @keyframes rotate_pacman_half_up {
        0% {
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
        }
      
        50% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      
        100% {
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
        }
      }
      
      @-webkit-keyframes rotate_pacman_half_down {
        0% {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
        }
      
        50% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
      
        100% {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
        }
      }
      
      @keyframes rotate_pacman_half_down {
        0% {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
        }
      
        50% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
      
        100% {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
        }
      }
      
      @-webkit-keyframes pacman-balls {
        75% {
          opacity: 0.7;
        }
      
        100% {
          -webkit-transform: translate(-100px, -6.25px);
          transform: translate(-100px, -6.25px);
        }
      }
      
      @keyframes pacman-balls {
        75% {
          opacity: 0.7;
        }
      
        100% {
          -webkit-transform: translate(-100px, -6.25px);
          transform: translate(-100px, -6.25px);
        }
      }
        
    </style>
  </head>
  <body>
    <div class="container">
      <!-- Loading HTML-->
      
      <div class="pacman">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
        
    </div>
  </body>
</html>
        

<style type="text/css">
    .lds-ellipsis {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

    .lds-ellipsis div {
        position: absolute;
        top: 33px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: red;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
        -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

    .lds-ellipsis div:nth-child(1) {
        left: 8px;
        animation: lds-ellipsis1 0.6s infinite;
        -webkit-animation: lds-ellipsis1 0.6s infinite;
    }

    .lds-ellipsis div:nth-child(2) {
        left: 8px;
        animation: lds-ellipsis2 0.6s infinite;
        -webkit-animation: lds-ellipsis2 0.6s infinite;
    }

    .lds-ellipsis div:nth-child(3) {
        left: 32px;
        animation: lds-ellipsis2 0.6s infinite;
        -webkit-animation: lds-ellipsis2 0.6s infinite;
    }

    .lds-ellipsis div:nth-child(4) {
        left: 56px;
        animation: lds-ellipsis3 0.6s infinite;
        -webkit-animation: lds-ellipsis3 0.6s infinite;
    }

    @keyframes lds-ellipsis1 {
        0% {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
        }
    }

    @keyframes lds-ellipsis3 {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(0);
        }
    }

    @keyframes lds-ellipsis2 {
        0% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(24px, 0);
        }
    }

    @-webkit-keyframes lds-ellipsis1 {
        0% {
            -webkit-transform: scale(0);
        }
        100% {
            -webkit-transform: scale(1);
        }
    }

    @-webkit-keyframes lds-ellipsis3 {
        0% {
            -webkit-transform: scale(1);
        }
        100% {
            -webkit-transform: scale(0);
        }
    }

    @-webkit-keyframes lds-ellipsis2 {
        0% {
            -webkit-transform: translate(0, 0);
        }
        100% {
            -webkit-transform: translate(24px, 0);
        }
    }

</style>
<div class="lds-ellipsis">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
一枕黄粱-web
关注
专栏目录
纯css-loading兼容Safari ，Chrome，Mozilla Firefox，opera，ie10+
04-04
纯css-loading兼容Safari ，Chrome，Mozilla Firefox，opera，ie10+
jsp页面加载时提示loading
09-08
jsp页面加载时提示loading!! jsp页面加载时提示loading!!
兼容IE,FF的JS图片loading及放大查看效果
phphot
03-26 2068
var smallX = 150; //缩略图宽度var bigX = 600; //预览窗大小,可以任意设置var bigY = 450;var srcX = -1; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小var srcY = -1;var border = 5; //边框var smallY,viewX,viewY,bl,isIE,vX,vY;window.onload
加载loading（兼容ff和ie）
键盘上的舞者
06-20 301
[code="java"] $("#loading_img").bind("ajaxStart",function(){ $("#loading_img").show(); $("#loading_img").css( "opacity", "1" ); }).bind("ajaxStop",function(
CSS3 box-shadow兼容loading效果兼IE10+ CSS Hack介绍
pj_me
12-18 1536
一、称为引言的部分 周一的时候，见到条转发较多的微博，是个页面链接，页面中有4个充分发挥CSS3 box-shadow潜力实现精湛的效果。 有4个demo4种效果哦！ 比方说第三个的彩色转啊转的loading效果： 是不是帅得掉渣啊！ 然而这种效果的实现就像是在大街上耍猴，围观人挺多，喝彩声也不少，但是，看完了，大家各回各家、各找各妈了！ 好比上面那个炫炫的酷酷的转转加载效果，全部
237个各式各样的loading.gif图标合计
12-02
这个资源包包含了237个不同的loading.gif图标，旨在为开发者和设计师提供丰富的选择，以适应各种应用场景和设计风格。 加载图标的作用在于减少用户的感知等待时间，当页面或数据正在加载时，一个生动有趣的加载图标...
各式各样的导航条效果css3结合jquery代码实现
10-21
本文主要探讨如何利用CSS3和jQuery来实现四种常见的导航条效果：高亮显示、中英文切换、弹性动画和摩擦运动动画。我们将专注于第一种——高亮显示的导航条。 高亮显示的导航条是一种简单但有效的设计，当用户点击...
各式各样的loading图片
12-03
"各式各样的loading图片"这个主题，主要是为了在数据请求期间提供视觉反馈，让用户知道系统正在处理他们的请求，而不是无响应。这些loading图片通常以gif格式呈现，因为gif支持动画，可以更生动地展示加载过程。 ...
Photoshop投影与CSS中box-shadow的转换
12-13
"混合模式"：Photoshop提供了各式各样的混合模式，但是CSS3阴影只支持正常模式（normal）。 "颜色（color）"：阴影颜色。对应于CSS3阴影中的 color 值。 "不透明度（opacity）"：阴影的不透明度。对应于CSS3阴影的...
推荐10个CSS3 制作的创意下拉菜单效果
09-25
在实现创意下拉菜单的时候，设计师需要注意浏览器兼容性问题，因为不是所有的浏览器都完全支持CSS3的最新特性。老版本的浏览器可能需要降级处理，而新浏览器则能展现更好的效果。例如，针对不支持CSS3过渡效果的...
兼容性良好的css3点点点loading动画提交效果.zip
07-04
效果描述： 类似loading动画效果，当用户在点击提交表单的时候，文字后面的点点点会以此出现 模仿一个loading动画效果，非常不错 使用方法： 1、将index.html 中的CSS样式拷贝过去 2、将body中的代码部分拷贝过去即可
框架加载时的loading效果，兼容Firefox.rar
07-04
框架加载时的loading效果，兼容Firefox
CSS3实现10种Loading效果
09-24
主要为大家详细介绍了CSS3实现10种Loading效果，效果实现简单新颖，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
真实加载页面信息时显示的loading特效，兼容Firefox
weixin_30629977的博客
02-04 99
大家看到很多页面的Loading很好看，当有些是假的，设置了一些时间后，再进入想要跳转的页面。现在我有一个真实页面加载前的Loading。。。一。框架中<head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>框架中的LOADING</title&gt...
基于css的简单loading效果
WGS.
01-11 377
效果图 简单loading效果，可直接在页面加载时，调用css，兼容已完善大小颜色修改即可 <div class="loading"></div> css .loading { margin:100px auto; width:100px; height:100px; border:10px solid #333333; border-bottom:#aa...
简单的前台加载等待图片
weixin_30772105的博客
06-07 148
背景 这个是充分证明了我对js和css的不熟悉，之前一直用了个第三个插件实现加载等待功能，每次还挺麻烦，后来见了这位同事写的，这么简单。吓我一裤子。 实现 <div id="divloading" class="bg-loading"><div class="loadingmsg">正在处理，请稍等...</div></div&gt...
CSS 实现各种 Loading 效果
猿男孩的博客
06-16 5122
CSS 实现各种 Loading 效果 效果实现： 这篇文章主要介绍了CSS 实现各种 Loading 效果附带解析过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。...
简单实用的JS实现页面加载完毕之前loading提示效果(兼容性较强的loading载入代码)
qq224428的博客
10-05 6832
简单实用的JS实现页面加载完毕之前loading提示效果 做成js调用： 一、JS代码： //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loa...
"电磁兼容性测试方法教材：设计与生产过程的关键验证
在现代社会，电磁兼容性测试方法各式各样整合系统设备，为人类生活带来了无限的方便利益，但同时也造成了复杂的电磁噪声环境。四十年前，欧洲体 IEC/CISPR 等委员会针对电磁噪声环境趋势，发出了89/336/EEC EMC 指令...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值