登录
当前位置： 首页 > 工具软件 > Loading Balls > 使用案例 >

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

韦叶秋
2023-12-01 
<!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>
 类似资料：

相关阅读

JS实现兼容各浏览器解析XML文档数据的方法JavaScript代码编写中各种各样的坑和填坑方法JS实现兼容各种浏览器的获取选择文本的方法【测试可用】DBMS中的各种键JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】

相关文章

各个微服务注册中心对比各个面试轮次都在考察什么双非本秋招总结+各个公司面经寒意袭人-巨硬在职社招各大厂挂经设计师面试问题整理，各大厂面试经验总结

相关问答

带有Python的Websockets-各种选项计算各种系数[重复]java - Java怎么调用Excel中的各种公式？C++中各种类的无效指针如何使用各种Istio端口？

相关文档

各种算法的 Python 实现方案Web 浏览器 API 文档23 种设计模式Chrome 扩展开发文档 / 360 浏览器开发文档Tornado 概览
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.