码龄4年的老司机用过的loading效果（附源码）

作者：胖胖我有点烦

链接：https://blog.csdn.net/JiangLittleBai/article/details/109000535

loading效果1

效果图

html

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

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;
            }
        }

loading效果2

效果图

html

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

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;
            }
        }

loading效果3

效果图

html

    <div class="loading3">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

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;
        }

loading效果4

效果图

html

    <div class="loading4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

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;
        }

loading效果5

效果图

html

      <div class="loading5">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

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;
        }

loading效果6

效果图

html

    <div class="loading6">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

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;
        }