Javascript CSS动画圆颜色在一个圆上

我想把所有这些圆环组合起来，这样每个圆环都是绕着一个圆旋转的第三个圆环

还有，如何将标题置于圆圈上方的中心位置。尝试使用文本对齐：居中；但这不起作用

谢谢，我已经在下面展示了代码

.loader{
边框：16px实心#F3；/*浅灰色*/
边框顶部：16px实心绿黄色；/*蓝色*/
边界半径：50%；
宽度：120px；
高度：120px；
动画：旋转2s线性无限；
}
.装载机2{
边框：16px实心#F3；/*浅灰色*/
边框顶部：16px纯色淡紫罗兰色；/*蓝色*/
边界半径：50%；
宽度：120px；
高度：120px；
动画：旋转2s线性无限；
}
.装载机3{
边框：16px实心#F3；/*浅灰色*/
边框顶部：16px纯紫色；/*蓝色*/
边界半径：50%；
宽度：120px；
高度：120px；
动画：旋转2s线性无限；
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}

1
2
3
s

这就是你想要的

.loader{
边框：16px实心#F3；/*浅灰色*/
边框顶部：16px实心绿黄色；/*蓝色*/
边框底部：16px纯色淡紫色；/*蓝色*/
右边框：16px纯紫色；/*蓝色*/
边界半径：50%；
宽度：120px；
高度：120px；
动画：旋转2s线性无限；
}
.包装纸{
文本对齐：居中；
显示：内联块；
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}

一,

部分{
显示：内联块；
文本对齐：居中；
}
.圆圈{
边框：0.3rem实心#ffbb00；
边框顶部：0.3rem实心#7cbb00；
边框底部：0.3rem实心#00a1f1；
右边框：0.3rem实心#f65314；
边界半径：50%；
宽度：150px；
高度：150像素；
动画：旋转1s线性无限；
}
@关键帧旋转{
100%{变换：旋转（-360度）；}
0%{变换：旋转（0度）；}
}

中间标题

“所以每种颜色都是第三种颜色，绕着一个圆圈旋转”您的意思是希望三种颜色在一个圆圈内吗？请您澄清一下，这是第四种颜色，而不是第三种颜色。