CSS 实现 一些简单的loading

1、loading效果1

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

2.1 HTML

    <div class="loading2">
        <div class="circle"></div>
    </div>

2.2 css

.loading2 {
   
            width: 180px;
            height: 6px;