*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    /* 背景顏色 */
    background-color: #000;
}
.loader-body{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 與上邊界的距離 */
    height: 100vh;
    /* 與左邊界的距離 */
    width: 100%;
}
/* 第一個光圈 */
.loader{
    position: relative;
    /* 這裡可以改 */
    width: 250px;
    /* 這裡可以改 */
    height: 250px;
    /* 這裡 5px 和 #03fcfc 可以改 */
    border-top: 5px solid #03fcfc;
    border-radius: 100%;
    /* 這裡 2s 可以改 */
    animation: 2s spin linear infinite;
}
/* 第二個光圈 */
.loader::before{
    position: absolute;
    content: "";
    height: inherit;
    width: inherit;
    /* 這裡 5px 和 #f303fc 可以改 */
    border-bottom: 5px solid #f303fc;
    border-radius: 100%;
}
/* 旋轉的程式 */
@keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
/*
@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}
*/