純css loading動效

.loading {margin: 100px;

    width: 3px; height:3px;

    border-radius: 100%;                      /* 圓角 */

    box-shadow: 0 -10px 0 1px #333,           /* 上, 1px 擴展 */

                10px 0px #333,                /* 右 */    

                0 10px #333,                  /* 下 */

                -10px 0 #333,                 /* 左 */

                              

                -7px -7px 0 .5px #333,        /* 左上, 0.5px擴展 */

                7px -7px 0 1.5px #333,        /* 右上, 1.5px擴展 */                    

                7px 7px #333,                 /* 右下 */

                -7px 7px #333;                /* 左下 */

}

.spin {

    animation: spin 1s steps(8) infinite;

}

@keyframes spin {

    from {transform: rotate(0deg);}

      to {transform: rotate(360deg);}

}

 

<div class="loading spin"></div>