【渐变+动画】实现加载效果

【一】实现进度条0-100%

<div class="progress-1"></div>

.progress-1 {
    width: 100px;
    border-radius: 4px;
    height: 20px;
    background: linear-gradient(#f6b352 0 0) 0/0% no-repeat #ddd;
    animation: progress 2s infinite linear;

}

@keyframes progress {
    100% {
        background-size: 100%;
    }
}

【一】实现转圈加载

/* 转圈加载 */
.container {
    background-color: #000;
    display: inline-block;
}
.circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #fff #fff transparent transparent;
    animation: rotation 1s linear infinite;
}

.circle::after,.circle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    border: 3px solid;
    animation: rotation-back 0.5s linear infinite;
}

.circle::after {
    border-color: transparent #f6b352 #f6b352 transparent;
    width: 52px;
    height: 52px;
}

.circle::before {
    border-color: transparent transparent #fff #fff;
    width: 44px;
    height: 44px;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotation-back {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

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