在現代網站設計中，動畫效果已經成為了重要的一部分。而CSS Loaders需要在頁面加載或傳輸過程中通過展示動畫效果來提高用戶體驗。簡單地說，這種動畫效果可以讓用戶知道網站正在進行操作或加載，這樣就不會讓用戶感到失望或迷茫。此外，由于它們只是用CSS實現，因此它們通常非常輕量級且易于管理。

.loader {
text-align: center;
font-size: 10px;
position: relative;
margin: 0;
padding: 0;
}
.loader-inner {
display: inline-block;
width: 2.5em;
height: 2.5em;
position: relative;
animation: loader-rotate 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.loader-inner:after,
.loader-inner:before {
content: '';
display: block;
position: absolute;
left: -0.25em;
top: -0.25em;
width: 0.5em;
height: 0.5em;
border-radius: 0.25em;
animation: loader-bounce 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
background-color: #fff;
}
.loader-inner:after {
animation-delay: -1.1s;
}
@keyframes loader-rotate {
to {transform: rotate(360deg);}
}
@keyframes loader-bounce {
50% {
transform: translateX(1.8em);
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}
to {transform: translateX(0);}
}

這是一個CSS Loader動畫的示例代碼。該代碼包含兩個關鍵元素：loader和loader-inner。通常，loader這個容器應該放在需要展示動畫的地方，在這個示例中，可以通過將這個容器放在網站的頂部來展示加載動畫。除此之外，loader-inner就是動畫的實際元素，這個元素是實現整個動畫效果的核心，包含一個旋轉動畫和兩個彈跳動畫版塊，最終展示出一種經典‘加載-彈跳’的動畫效果。