-2
Im using webkit因爲我大多使用chrome來預覽。CSS 3 Spin not working
圓圈我做不紡（我肯定它不是一個HTML的問題。）
#loader-wrapper {
\t position: fixed;
\t top: 0;
\t left: 0;
\t width: 100%;
\t height: 100%;
\t z-index: 1000;
}
#loader {
\t display: inline-block;
\t position: relative;
\t left: 50%;
\t top: 50%;
\t width: 150px;
\t height: 150px;
\t margin: -75px 0 0 -75px;
\t
\t border-radius: 50%;
\t border: 3px solid transparent;
\t border-top-color: yellow;
\t -webkit-animation: spin 1.5 infinite;
\t animation: spin 1.5 infinite;
}
#loader:before {
\t content: "";
\t position: absolute;
\t top: 5px;
\t left:5px;
\t right: 5px;
\t bottom: 5px;
\t
\t border-radius: 50%;
\t border: 3px solid transparent;
\t border-top-color: orange;
\t -webkit-animation: spin 1.5 infinite;
\t animation: spin 1.5 infinite;
}
#loader:after {
\t content: "";
\t position: absolute;
\t top: 15px;
\t left:15px;
\t right: 15px;
\t bottom: 15px;
\t border-radius: 50%;
\t border: 3px solid transparent;
\t border-top-color: red;
\t -webkit-animation: spin 1.5 infinite;
\t animation: spin 1.5 infinite;
}
@-webkit-keyframes spin {
\t 0% {-webkit-transform: rotate(0deg);}
\t 100% {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
\t 0% {transform: rotate(0deg);}
\t 100% {transform: rotate(360deg);}
}