常见的几种loding效果实现

程序员文章站 2022-04-10 17:41:51
...
这次我们来说一下常见的几种loding效果实现，loding效果实现需要注意哪几点，下面就是实战案例，一起来看一下。
<html>
       <head>
              <meta charset="UTF-8">
              <title>Loading</title>
              <link rel="stylesheet" type="text/css" href="loading.css">
              <style>
                     .loader {
                            float: left;
                     }
                    
                     .loader {
                            position: relative;
                            width: 5rem;
                            height: 5rem;
                     }
                    
                     .loader.small {
                            -webkit-transform: scale(.5);
                            transform: scale(.5);
                     }
                    
                     .loader.circle-line,
                     .loader.circle-round {
                            height: 5rem;
                     }
                     /*circle-line*/
                    
                     .loader.circle-line span {
                            position: absolute;
                            display: inline-block;
                            width: 1.5rem;
                            height: .5rem;
                            border-top-left-radius: .25rem;
                            border-bottom-left-radius: .25rem;
                            background: #1ABC9C;
                            opacity: .05;
                            -webkit-animation: circle-line 1s ease infinite;
                            animation: circle-line 1s ease infinite;
                     }
                    
                     .loader.circle-line span:nth-child(1) {
                            top: 50%;
                            left: 0;
                            margin-top: -.25rem;
                            -webkit-animation-delay: .13s;
                            animation-delay: .13s;
                     }
                    
                     .loader.circle-line span:nth-child(2) {
                            top: 1rem;
                            left: .5rem;
                            -webkit-transform: rotate(45deg);
                            transform: rotate(45deg);
                            -webkit-animation-delay: .26s;
                            animation-delay: .26s;
                     }
                    
                     .loader.circle-line span:nth-child(3) {
                            left: 50%;
                            top: .5rem;
                            margin-left: -.75rem;
                            -webkit-transform: rotate(90deg);
                            transform: rotate(90deg);
                            -webkit-animation-delay: .39s;
                            animation-delay: .39s;
                     }
                    
                     .loader.circle-line span:nth-child(4) {
                            right: .5rem;
                            top: 1rem;
                            -webkit-transform: rotate(145deg);
                            transform: rotate(145deg);
                            -webkit-animation-delay: .52s;
                            animation-delay: .52s;
                     }
                    
                     .loader.circle-line span:nth-child(5) {
                            left: 3.5rem;
                            top: 50%;
                            margin-top: -.25rem;
                            -webkit-transform: rotate(180deg);
                            transform: rotate(180deg);
                            -webkit-animation-delay: .65s;
                            animation-delay: .65s;
                     }
                    
                     .loader.circle-line span:nth-child(6) {
                            bottom: 1rem;
                            right: .5rem;
                            -webkit-transform: rotate(-145deg);
                            transform: rotate(-145deg);
                            -webkit-animation-delay: .78s;
                            animation-delay: .78s;
                     }
                    
                     .loader.circle-line span:nth-child(7) {
                            left: 50%;
                            bottom: .5rem;
                            margin-left: -15px;
                            -webkit-transform: rotate(-90deg);
                            transform: rotate(-90deg);
                            -webkit-animation-delay: .91s;
                            animation-delay: .91s;
                     }
                    
                     .loader.circle-line span:nth-child(8) {
                            bottom: 1rem;
                            left: .5rem;
                            -webkit-transform: rotate(-45deg);
                            transform: rotate(-45deg);
                            -webkit-animation-delay: 1.04s;
                            animation-delay: 1.04s;
                     }
                    
                     @keyframes circle-line {
                            0% {
                                   opacity: .05;
                            }
                            100% {
                                   opacity: .7;
                            }
                     }
                    
                     @-webkit-keyframes circle-line {
                            0% {
                                   opacity: .05;
                            }
                            100% {
                                   opacity: .7;
                            }
                     }
                     /*circle-line-spin*/
                    
                     .loader.circle-line-spin .circle-line-inner {
                            width: 100%;
                            height: 100%;
                            -webkit-animation: circle-line-spin 1.5s linear infinite;
                            animation: circle-line-spin 1.5s linear infinite;
                     }
                    
                     .loader.circle-line-spin span {
                            position: absolute;
                            display: inline-block;
                            width: 1.5rem;
                            height: .5rem;
                            border-top-left-radius: .25rem;
                            border-bottom-left-radius: .25rem;
                            background: #1ABC9C;
                            opacity: .7;
                     }
                    
                     .loader.circle-line-spin span:nth-child(1) {
                            top: 50%;
                            left: 0;
                            margin-top: -.25rem;
                     }
                    
                     .loader.circle-line-spin span:nth-child(2) {
                            top: 1rem;
                            left: .5rem;
                            -webkit-transform: rotate(45deg);
                            transform: rotate(45deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(3) {
                            left: 50%;
                            top: .5rem;
                            margin-left: -.75rem;
                            -webkit-transform: rotate(90deg);
                            transform: rotate(90deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(4) {
                            right: .5rem;
                            top: 1rem;
                            -webkit-transform: rotate(145deg);
                            transform: rotate(145deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(5) {
                            left: 3.5rem;
                            top: 50%;
                            margin-top: -.25rem;
                            -webkit-transform: rotate(180deg);
                            transform: rotate(180deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(6) {
                            bottom: 1rem;
                            right: .5rem;
                            -webkit-transform: rotate(-145deg);
                            transform: rotate(-145deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(7) {
                            left: 50%;
                            bottom: .5rem;
                            margin-left: -15px;
                            -webkit-transform: rotate(-90deg);
                            transform: rotate(-90deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(8) {
                            bottom: 1rem;
                            left: .5rem;
                            -webkit-transform: rotate(-45deg);
                            transform: rotate(-45deg);
                     }
                    
                     @keyframes circle-line-spin {
                            0% {
                                   transform: rotate(0);
                            }
                            100% {
                                   transform: rotate(360deg);
                            }
                     }
                    
                     @-webkit-keyframes circle-line-spin {
                            0% {
                                   -webkit-transform: rotate(0);
                            }
                            100% {
                                   -webkit-transform: rotate(360deg);
                            }
                     }
                     /*circle-round*/
                    
                     .loader.circle-round span {
                            opacity: .05;
                            -webkit-animation: circle-round 1s ease infinite;
                            animation: circle-round 1s ease infinite;
                     }
                    
                     .loader.circle-round-fade span {
                            -webkit-animation: circle-round-fade 1s ease infinite;
                            animation: circle-round-fade 1s ease infinite;
                     }
                    
                     .loader.circle-round span,
                     .loader.circle-round-fade span {
                            position: absolute;
                            width: .8rem;
                            height: .8rem;
                            display: inline-block;
                            border-radius: 50%;
                            background: #1ABC9C;
                     }
                    
                     .loader.circle-round span:nth-child(1),
                     .loader.circle-round-fade span:nth-child(1) {
                            top: 50%;
                            left: 0;
                            margin-top: -.4rem;
                            -webkit-animation-delay: -1.04s;
                            animation-delay: -1.04s;
                     }
                    
                     .loader.circle-round span:nth-child(2),
                     .loader.circle-round-fade span:nth-child(2) {
                            top: .7rem;
                            left: .7rem;
                            -webkit-animation-delay: -.91s;
                            animation-delay: -.91s;
                     }
                    
                     .loader.circle-round span:nth-child(3),
                     .loader.circle-round-fade span:nth-child(3) {
                            top: 0;
                            left: 50%;
                            margin-left: -.4rem;
                            -webkit-animation-delay: -.78s;
                            animation-delay: -.78s;
                     }
                    
                     .loader.circle-round span:nth-child(4),
                     .loader.circle-round-fade span:nth-child(4) {
                            right: .7rem;
                            top: .7rem;
                            -webkit-animation-delay: -.65s;
                            animation-delay: -.65s;
                     }
                    
                     .loader.circle-round span:nth-child(5),
                     .loader.circle-round-fade span:nth-child(5) {
                            right: 0;
                            top: 50%;
                            margin-top: -.4rem;
                            -webkit-animation-delay: -.52s;
                            animation-delay: -.52s;
                     }
                    
                     .loader.circle-round span:nth-child(6),
                     .loader.circle-round-fade span:nth-child(6) {
                            bottom: .7rem;
                            right: .7rem;
                            -webkit-animation-delay: -.39s;
                            animation-delay: -.39s;
                     }
                    
                     .loader.circle-round span:nth-child(7),
                     .loader.circle-round-fade span:nth-child(7) {
                            bottom: 0;
                            left: 50%;
                            margin-left: -.4rem;
                            -webkit-animation-delay: -.26s;
                            animation-delay: -.26s;
                     }
                    
                     .loader.circle-round span:nth-child(8),
                     .loader.circle-round-fade span:nth-child(8) {
                            left: .7rem;
                            bottom: .7rem;
                            -webkit-animation-delay: -.13s;
                            animation-delay: -.13s;
                     }
                    
                     @keyframes circle-round {
                            0% {
                                   opacity: .05;
                            }
                            100% {
                                   opacity: .7;
                            }
                     }
                    
                     @-webkit-keyframes circle-round {
                            0% {
                                   opacity: .05;
                            }
                            100% {
                                   opacity: .7;
                            }
                     }
                    
                     @keyframes circle-round-fade {
                            0% {
                                   opacity: .25;
                                   transform: scale(.2);
                            }
                            100% {
                                   opacity: 1;
                                   transform: scale(1);
                            }
                     }
                    
                     @-webkit-keyframes circle-round-fade {
                            0% {
                                   opacity: .25;
                                   transform: scale(.2);
                            }
                            100% {
                                   opacity: 1;
                                   transform: scale(1);
                            }
                     }
                     /*line-square*/
                    
                     .loader.line-square {
                            width: 6rem;
                            height: .8rem;
                     }
                    
                     .loader.line-square span {
                            position: absolute;
                            top: 0;
                            width: .8rem;
                            height: .8rem;
                            display: inline-block;
                            background: #1ABC9C;
                            -webkit-animation: line-square 1s ease infinite;
                            animation: line-square 1s ease infinite;
                     }
                    
                     .loader.line-square span:nth-child(1) {
                            left: 0;
                            -webkit-animation-delay: .13s;
                            animation-delay: .13s;
                     }
                    
                     .loader.line-square span:nth-child(2) {
                            left: 1.3rem;
                            -webkit-animation-delay: .26s;
                            animation-delay: .26s;
                     }
                    
                     .loader.line-square span:nth-child(3) {
                            left: 2.6rem;
                            -webkit-animation-delay: .39s;
                            animation-delay: .39s;
                     }
                    
                     .loader.line-square span:nth-child(4) {
                            left: 3.9rem;
                            -webkit-animation-delay: .52s;
                            animation-delay: .52s;
                     }
                    
                     .loader.line-square span:nth-child(5) {
                            left: 5.2rem;
                            -webkit-animation-delay: .65s;
                            animation-delay: .65s;
                     }
                    
                     @keyframes line-square {
                            0% {
                                   opacity: 1;
                                   transform: scale(1.2);
                                   -webkit-transform: scale(1.2);
                            }
                            100% {
                                   opacity: .2;
                                   transform: scale(.2);
                                   -webkit-transform: scale(.2);
                            }
                     }
                    
                     @-webkit-keyframes line-square {
                            0% {
                                   opacity: 1;
                                   transform: scale(1.2);
                                   -webkit-transform: scale(1.2);
                            }
                            100% {
                                   opacity: .2;
                                   transform: scale(.2);
                                   -webkit-transform: scale(.2);
                            }
                     }
                     /*line-round*/
                    
                     .loader.line-round {
                            width: 6rem;
                            height: .8rem;
                     }
                    
                     .loader.line-round span {
                            position: absolute;
                            top: 0;
                            width: .8rem;
                            height: .8rem;
                            border-radius: 50%;
                            display: inline-block;
                            background: #1ABC9C;
                            -webkit-animation: line-round 1s ease infinite;
                            animation: line-round 1s ease infinite;
                     }
                    
                     .loader.line-round span:nth-child(1) {
                            left: 0;
                            -webkit-animation-delay: .13s;
                            animation-delay: .13s;
                     }
                    
                     .loader.line-round span:nth-child(2) {
                            left: 1.3rem;
                            -webkit-animation-delay: .26s;
                            animation-delay: .26s;
                     }
                    
                     .loader.line-round span:nth-child(3) {
                            left: 2.6rem;
                            -webkit-animation-delay: .39s;
                            animation-delay: .39s;
                     }
                    
                     .loader.line-round span:nth-child(4) {
                            left: 3.9rem;
                            -webkit-animation-delay: .52s;
                            animation-delay: .52s;
                     }
                    
                     .loader.line-round span:nth-child(5) {
                            left: 5.2rem;
                            -webkit-animation-delay: .65s;
                            animation-delay: .65s;
                     }
                    
                     @keyframes line-round {
                            0% {
                                   opacity: 1;
                                   transform: scale(1.2);
                                   -webkit-transform: scale(1.2);
                            }
                            100% {
                                   opacity: .2;
                                   transform: scale(.2);
                                   -webkit-transform: scale(.2);
                            }
                     }
                    
                     @-webkit-keyframes line-round {
                            0% {
                                   opacity: 1;
                                   transform: scale(1.2);
                                   -webkit-transform: scale(1.2);
                            }
                            100% {
                                   opacity: .2;
                                   transform: scale(.2);
                                   -webkit-transform: scale(.2);
                            }
                     }
                     /*line-bounce*/
                    
                     .loader.line-bounce {
                            width: 6rem;
                            height: 2.5rem;
                     }
                    
                     .loader.line-bounce span {
                            position: absolute;
                            top: 0;
                            width: .5rem;
                            height: 2.5rem;
                            border-radius: 5px;
                            display: inline-block;
                            background: #1ABC9C;
                            -webkit-animation: line-bounce 1s ease infinite;
                            animation: line-bounce 1s ease infinite;
                     }
                    
                     .loader.line-bounce span:nth-child(1) {
                            left: 0;
                            -webkit-animation-delay: -.65s;
                            animation-delay: -.65s;
                     }
                    
                     .loader.line-bounce span:nth-child(2) {
                            left: 1.3rem;
                            -webkit-animation-delay: -.78s;
                            animation-delay: -.78s;
                     }
                    
                     .loader.line-bounce span:nth-child(3) {
                            left: 2.6rem;
                            -webkit-animation-delay: -.91s;
                            animation-delay: -.91s;
                     }
                    
                     .loader.line-bounce span:nth-child(4) {
                            left: 3.9rem;
                            -webkit-animation-delay: -.78s;
                            animation-delay: -78s;
                     }
                    
                     .loader.line-bounce span:nth-child(5) {
                            left: 5.2rem;
                            -webkit-animation-delay: -.65s;
                            animation-delay: -.65s;
                     }
                    
                     @keyframes line-bounce {
                            0% {
                                   transform: scaleY(1);
                            }
                            50% {
                                   transform: scaleY(.3);
                            }
                            100% {
                                   transform: scaleY(1);
                            }
                     }
                    
                     @-webkit-keyframes line-bounce {
                            0% {
                                   -webkit-transform: scaleY(1);
                            }
                            50% {
                                   -webkit-transform: scaleY(.3);
                            }
                            100% {
                                   -webkit-transform: scaleY(1);
                            }
                     }
                     /*circle-spin*/
                    
                     .loader.circle-spin {
                            border-radius: 50%;
                            border: .2rem solid rgba(0, 0, 0, .05);
                            width: 4rem;
                            height: 4rem;
                            box-sizing: content-box;
                     }
                    
                     .loader.circle-spin .loader-placeholder {
                            position: absolute;
                            top: -.2rem;
                            left: -.2rem;
                            border-radius: 50%;
                            border: .2rem solid transparent;
                            border-top: .2rem solid #1ABC9C;
                            width: 4rem;
                            height: 4rem;
                            box-sizing: content-box;
                            -webkit-animation: circle-spin 1s ease infinite;
                            animation: circle-spin 1s ease infinite;
                     }
                    
                     @keyframes circle-spin {
                            0% {
                                   transform: rotate(0);
                            }
                            100% {
                                   transform: rotate(360deg);
                            }
                     }
                    
                     @-webkit-keyframes circle-spin {
                            0% {
                                   -webkit-transform: rotate(0);
                            }
                            100% {
                                   -webkit-transform: rotate(360deg);
                            }
                     }
              </style>
       </head>
 
       <body>
              <div>
                     <div class="loader circle-line small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader circle-line-spin small">
                            <div>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                            </div>
                     </div>
                     <div class="loader circle-round small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader circle-round-fade small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader line-square small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader line-round small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader line-bounce small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader circle-spin small">
                            <div></div>
                     </div>
              </div>
 
       </body>
</html>
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
常见的几种loding效果实现

Python实现自定义函数的5种常见形式分析

用Python解析XML的几种常见方法的介绍

Android 仿京东商城底部布局的选择效果(Selector 选择器的实现)

vueJS简单的点击显示与隐藏的效果【实现代码】

jQuery实现的淡入淡出图片轮播效果示例

jQuery实现的简单手风琴效果示例

elementUI select组件默认选中效果实现的方法

Android 实现全屏显示的几种方法整理

Android 点击ImageButton时有“按下”的效果的实现

pr2020字幕字体样式怎么设置? premiere字幕实现上宽下窄效果的技巧
