23.动态加载

动态加载

html部分

css部分

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}
.loading{
    position: relative;
    width: 80px;
    height: 80px;
}
.loading::after,.loading::before{
    content: "";
    position: absolute;
    inset: 0;
    border: 50px solid transparent;
    border-bottom-color: #fff;
}

@keyframes loadingA{
    0%,25%{transform: rotate(0);}
    50%,75%{transform: rotate(180deg);}
    100%{transform: rotate(360deg);}
}
@keyframes loadingB{
    0%,25%{transform: rotate(90deg);}
    50%,75%{transform: rotate(270deg);}
    100%{transform: rotate(450deg);}
}

.loading::after{
    animation: loadingA 2s linear infinite ;
}
.loading::before{
    transform: rotate(90deg);
    animation: loadingB 2s  linear 1.5s infinite ;
}

效果