CSS旋轉加載動畫是一種常用的UI設計風格，它可以讓頁面更加生動有趣。在下面的例子中，我們將展示如何通過CSS實現一個基于旋轉的加載中動畫。

.loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
}
.loader:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
border: 10px solid rgba(0, 0, 0, 0.1);
border-top-color: #3498db;
animation: loader 1s infinite linear;
}
@keyframes loader {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

首先，我們需要創建一個顯示加載中的容器，并將其居中顯示。為了實現這一點，我們使用了position、top、left、transform等屬性。

然后，我們使用:before偽類創建一個圓形的元素，并將其設置在容器中央。同時，我們設置了圓形的尺寸、邊框、邊框顏色以及旋轉動畫。

最后，我們使用@keyframes定義旋轉動畫的過渡狀態，從0度到360度之間無限循環旋轉。

總之，通過上述代碼，我們可以輕松地實現一個基于旋轉的加載中動畫。在實際應用中，您可以根據自己的需求進行樣式、尺寸等方面的調整，以及結合JavaScript實現更加復雜的交互效果。