CSS 实现一些简单的loading

缺乏、安全感 2022-12-13 04:58 198阅读 0赞

### 1、loading效果1 ###

![在这里插入图片描述][20201010165717981.gif_pic_center]

###### 1.1 html ######

<h1>loading效果</h1>
        <div class="loading1">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

###### 1.2 css ######

.loading1 { 
                margin: 20px;
                display: inline-flex;
                align-items: center;
                height: 50px;
            }
    
            .loading1 span { 
                display: inline-block;
                width: 6px;
                height: 30px;
                border-radius: 3px;
                margin:0 3px;
                background-color: lightgreen;
                animation: loading11 1s ease 0s infinite;
            }
            .loading1 span:nth-child(2){ 
                animation-delay: 0.2s;
            }
    
            .loading1 span:nth-child(3){ 
                animation-delay: 0.4s;
            }
            .loading1 span:nth-child(4){ 
                animation-delay: 0.6s;
            }
            .loading1 span:nth-child(5){ 
                animation-delay: 0.8s;
            }
    
            @keyframes loading11 { 
                0%, 100% { 
                    height: 30px;
                    background-color: lightgreen;
                }
    
                50% { 
                    height: 50px;
                    background-color: lightskyblue;
                }
            }

### 2、loading效果2 ###

![在这里插入图片描述][20201010171357873.gif_pic_center]

###### 2.1 HTML ######

###### 2.2 css ######

.loading2 { 
                width: 180px;
                height: 6px;
                border-radius: 3px;
                background-color: lightskyblue;
                position: relative;
            }
    
            .loading2 .circle { 
                width: 16px;
                height: 16px;
                border-radius: 50%;
                display: inline-block;
                background-color: lightseagreen;
                position: absolute;
                top: -5px;
                left:0;
                animation: loading22 3s linear 0s infinite;
            }
    
            @keyframes loading22 { 
    
                0%, 100% { 
                    left: 0;
                }
    
                50% { 
                    left: 164px;
                }
            }

### 3、loading效果3 ###

![在这里插入图片描述][20201010172405212.gif_pic_center]

###### 3.1 html ######

###### 3.2 css ######

.loading3{ 
                width: 100px;
                height: 30px;
    
            }
            .loading3 span{ 
                display: inline-block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: lightskyblue;
                animation: loading33 2s linear 0s infinite;
            }
    
            @keyframes loading33{ 
               0%,100%{ 
                   opacity: 0;
               } 
               50%{ 
                   opacity: 1;
               }
            }
            .loading3 span:nth-child(2){ 
                animation-delay: 0.3s;
            }
            .loading3 span:nth-child(3){ 
                animation-delay: 0.6s;
            }
            .loading3 span:nth-child(4){ 
                animation-delay: 0.9s;
            }
            .loading3 span:nth-child(5){ 
                animation-delay: 1.2s;
            }

### 4、loading效果4 ###

![在这里插入图片描述][20201010173626656.gif_pic_center]

###### 4.1 html ######

###### 4.2 css ######

.loading4{ 
                width: 120px;
                height: 20px;
                position: relative;
            }
            .loading4 span{ 
                position: absolute;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: lightpink;
                animation: loading44 2s ease 0s infinite ;
            }
            
    
            @keyframes loading44{ 
                0%,100%{ 
                    left:0;
                    opacity: 1;
                }
                50%{ 
                    left:100px;
                    opacity: 0;
                }
            }
            .loading4 span:nth-child(2){ 
                left:12px;
                animation-delay: 0.2s;
            }
            .loading4 span:nth-child(3){ 
                left:24px;
                animation-delay: 0.3s;
            }
            .loading4 span:nth-child(4){ 
                left:36px;
                animation-delay: 0.4s;
            }
            .loading4 span:nth-child(5){ 
                left:48px;
                animation-delay: 0.5s;
            }

### 5、loading效果 ###

![在这里插入图片描述][20201010175345658.gif_pic_center]

###### 5.1 html ######

###### 5.2 css ######

.loading5{ 
                width: 100px;
                height: 20px;
            }
    
            .loading5 span{ 
                display: inline-block;
                width: 12px;
                height: 12px;
                background-color: lightsalmon;
                transform: rotate(90deg);
                animation: loading55 1s ease 0s infinite ;
                transform-origin: right;
            }
    
            @keyframes loading55{ 
                0%{ 
                  opacity: 1;
                  transform: rotate(0deg);
                }
                100%{ 
                  opacity: 0;
                  transform: rotate(90deg); 
                }
            }
            .loading5 span:nth-child(2){ 
                animation-delay: 0.2s;
            }
            .loading5 span:nth-child(3){ 
                animation-delay: 0.4s;
            }
            .loading5 span:nth-child(4){ 
                animation-delay: 0.6s;
            }
            .loading5 span:nth-child(5){ 
                animation-delay: 0.8s;
            }

### 6、loading效果 ###

![在这里插入图片描述][20201011161702635.gif_pic_center]

###### 6.1 html ######

###### 6.2 css ######

.loading6 { 
                width: 150px;
                height: 150px;
                position: relative;
                animation: loading66 5s linear 0s infinite;
                transform-origin: center;
            }
    
            .loading6 span { 
                width: 12px;
                height: 12px;
                display: inline-block;
                background-color: lightsalmon;
                border-radius: 50%;
                transform-origin: 0px 50px;
                position: absolute;
                left:72px;
                top: 24px;
                animation: loading666 2s linear 0s infinite;
               
            }
    
            @keyframes loading66{ 
                0%{ 
                    transform: rotate(0deg);             
                }
                50%{ 
                    transform:rotate(180deg);
                }
                100%{ 
                    transform: rotate(360deg);
                }
            }
    
            @keyframes loading666{ 
                0%{ 
                  opacity: 1;
                }
                100%{ 
                    opacity: 0;
                }
            }      
            .loading6 span:nth-child(1) { 
                transform: rotate(0deg);
                animation-delay: 0.1s;
            }
    
            .loading6 span:nth-child(2) { 
                transform: rotate(45deg);
                animation-delay: 0.2s;
            }
    
            .loading6 span:nth-child(3) { 
                transform: rotate(90deg);
                animation-delay: 0.3s;
            }
    
            .loading6 span:nth-child(4) { 
                transform: rotate(135deg);
                animation-delay: 0.4s;
            }
    
            .loading6 span:nth-child(5) { 
                transform: rotate(180deg);
                animation-delay: 0.5s;
            }
    
            .loading6 span:nth-child(6) { 
                transform: rotate(225deg);
                animation-delay: 0.6s;
            }
    
            .loading6 span:nth-child(7) { 
                transform: rotate(270deg);
                animation-delay: 0.7s;
            }
    
            .loading6 span:nth-child(8) { 
                transform: rotate(315deg);
                animation-delay: 0.8s;
            }

[20201010165717981.gif_pic_center]: /images/20221123/2cfafcd8bd1b4aa0b8213eaee4b2bbde.png
[20201010171357873.gif_pic_center]: /images/20221123/2cf66dbf805c4dfc9a2a9141a61883fc.png
[20201010172405212.gif_pic_center]: /images/20221123/0382d0ffb4d64914bed3d244c6f1e678.png
[20201010173626656.gif_pic_center]: /images/20221123/571bd51d868043f485080741b3987434.png
[20201010175345658.gif_pic_center]: /images/20221123/b407634102f4490288baaaccbee97cf6.png
[20201011161702635.gif_pic_center]: /images/20221123/02fb5871a77b487e8762f67864a6941f.png