CODEWITHSUNDEEP
javascripthtmlcss
joe m
joe m

Reputation: 85

CSS animation circle colours on one circle

I would like to combine all these cirles so each is a third rotating around a single circle......

Also how do I centre the titles above the circle. Have tried using text-align:centre; but that doesnt work.....

thanks I appriciate it I have shown the code here below

.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); }
}
    <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>

Upvotes: 1

Views: 801

Answers (2)

user8823283
user8823283

Reputation: 

.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); }
}
<div class="section">
  <h5 class="header">CENTER TITLE</h5>
  <div class="circle"></div>
</div>

Upvotes: 0

priyadarshi swain
priyadarshi swain

Reputation: 246

Is this what you want!!

.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>

Update

Centering the text.

Upvotes: 2

Related Questions