CSS动画圈在一个圆圈上的颜色

Question

我想把所有这些圈子组合在一起，所以每个圈子围绕一个圆圈旋转......

另外，如何将标题置于圆圈上方。尝试过使用text-align：center;但那不起作用.....

谢谢我赞美它我已经在下面显示了代码

＆＃13;

＆＃13;

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid greenyellow; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.loader2 {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid palevioletred; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.loader3 {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid purple; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

＆＃13;

    <div class="col-lg-12">

      

        <div class="col-lg-4">
            <p class="textcentre">1</p>
            <div class="loader"></div>
        </div>

        <div class="col-lg-4">
            <p class="textcentre">2</p>
            <div class="loader2"></div>
        </div>

        <div class="col-lg-4">
            <p class="textcentre">3</p>
            <div class="loader3"></div>
        </div>

        

    </div>
    s
    <div>
    
    </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这就是你想要的!!

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid greenyellow; /* Blue */
    border-bottom: 16px solid palevioletred; /* Blue */
    border-right: 16px solid purple; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}
.wrapper {
    text-align: center;
    display: inline-block;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<div class="col-lg-12">
     <div class="col-lg-4">
        <div class="wrapper">
           <p>1</p>
           <div class="loader"></div>
        </div>
     </div>
</div>

<强>更新

以文字为中心。

Answer 2

＆＃13;

＆＃13;

.section {
    display: inline-block;
    text-align: center;
}
.circle {
    border: 0.3rem solid #ffbb00;
    border-top: 0.3rem solid #7cbb00;
    border-bottom: 0.3rem solid #00a1f1;
    border-right: 0.3rem solid #f65314;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(-360deg); }
    0% { transform: rotate(0deg); }
}

＆＃13;

<div class="section">
  <h5 class="header">CENTER TITLE</h5>
  <div class="circle"></div>
</div>

＆＃13;

＆＃13;

＆＃13;