在我們平時使用網站的過程中，經常會遇到許多需要等待加載的情況。比如說在網頁中加載圖片、音頻、視頻等元素，加載的時間可能會有所不同，這時候我們就需要給用戶展示一個提示信息告訴他們正在加載中，以免用戶誤以為頁面出現了問題。這就需要我們使用一些技術來實現等待加載的效果。本文將介紹純CSS實現等待加載的方法。

在實現等待加載的過程中，我們使用一個div元素來作為等待加載的容器，然后在CSS中設置內容加載完成之前需要展示的效果。以下是實現等待加載的CSS樣式：

.loader {
display: inline-block;
width: 40px;
height: 40px;
position: relative;
border: 4px solid #f2f2f2;
border-radius: 50%;
animation: loader 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.loader::before,
.loader::after {
content: "";
position: absolute;
top: -4px;
left: -4px;
width: inherit;
height: inherit;
border-radius: 50%;
border: 4px solid transparent;
}
.loader::before {
animation: loaderBefore 0.8s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.loader::after {
animation: loaderAfter 0.8s cubic-bezier(0.5, 0, 0, 0.5) infinite;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loaderBefore {
0% {
transform: scale(1);
border-color: #ff3d00;
}
100% {
transform: scale(0);
border-color: #ff3d00;
}
}
@keyframes loaderAfter {
0% {
transform: scale(1);
border-color: #00b0ff;
}
100% {
transform: scale(0);
border-color: #00b0ff;
}
}

上述代碼實現了一個邊框大小為40px的圓形容器，并通過animation屬性來控制圓形轉動的效果，使其在0.8秒內完成一次360度的旋轉。除此之外，還設置了::before與::after偽元素來實現了兩個邊框顏色不同的圓環，通過不同的動畫效果來實現更加豐富的等待加載動畫。

在使用上述代碼實現等待加載效果時，只需將div元素的類設置為loader，并按照需要的樣式和布局來調整即可。