Css animasyonu ile radyal ilerleme çubuğu oluşturma düğmesi tıklandığında

Question

Bunu başarmaya çalışırken büyük bir sorun yaşadım. Nasıl bir şey canlandıracağımı anlamıyorum, böylece bir daire içinde dönüyor, böylece bir çalışanı Circle Progress Bar'dan yakaladım ve jQuery kullanarak düğmeyi tıklayarak onu animasyon haline getirmenin bir yolunu bulmaya çalışıyorum. this eğitimini kullanmayı denedim, ancak düzgün bir şekilde nasıl dahil edileceğine dair hiçbir fikrim yok. Lütfen yardım et. İşte benim çalışmam yakın gelmese de benim Fiddle benim. 'Ilerleme' bir sınıf değil, bir kimliktir beri

.progress { 
    width:200px; 
    height:200px; 
    background:#fff; 
    border:2px solid #000; 
    position:relative; 
    margin:50px; 
    border-radius:50%; 
    overflow:hidden; 
    transform: translateZ(0px); 
    display:inline-block; 
} 
.activatedAfter { 
    -moz-animation:turn 4s linear forwards; 
    -webkit-animation:turn 4s linear forwards; 
    -moz-animation-delay:4s; 
    -webkit-animation-delay:4s; 

} 
.activated { 

    -moz-animation:turn 4s linear forwards; 
    -webkit-animation:turn 4s linear forwards; 
    -o-animation:turn 4s linear forwards; 
    -ms-animation:turn 4s linear forwards; 
    animation:turn 4s linear forwards; 


} 

@-moz-keyframes turn { 
    99.9% { 
     transform:rotate(180deg); 
     background:tomato; 
    } 
    100% { 
     background:#fff; 
    } 
} 
@-webkit-keyframes turn { 
    99.9% { 
     transform:rotate(180deg); 
     background:tomato; 
    } 
    100% { 
     background:#fff; 
    } 
} 
@-o-keyframes turn { 
    99.9% { 
     transform:rotate(180deg); 
     background:tomato; 
    } 
    100% { 
     background:#fff; 
    } 
} 
@-ms-keyframes turn { 
    99.9% { 
     transform:rotate(180deg); 
     background:tomato; 
    } 
    100% { 
     background:#fff; 
    } 
} 
@keyframes turn { 
    99.9% { 
     transform:rotate(180deg); 
     background:tomato; 
    } 
    100% { 
     background:#fff; 
    } 
} 

Answer 1

Ben senin keman içinde $('.progress') için $('#progress') değiştirdi. Ayrıca, sağladığınız bağlantıdaki örnekle activatedAfter stilini activated:after ve activated:before stilleriyle değiştirdim.

Ayrıca, ben

bu

$('#battleButton').click(function() { 
 
\t $('.progress').addClass('activated activatedAfter'); 
 
});

body { 
 
    background-color: #000; 
 
} 
 

 
.progress { 
 
    width:200px; 
 
    height:200px; 
 
    background:#fff; 
 
    border:2px solid #000; 
 
    position:relative; 
 
    margin:50px; 
 
    border-radius:50%; 
 
    overflow:hidden; 
 
    transform: translateZ(0px); 
 
    display:inline-block; 
 
} 
 
.activated:after { 
 
    position:absolute; 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    top:0; 
 
    left:-50%; 
 
    background:tomato; 
 
    -moz-animation:turn 4s linear forwards; 
 
    -webkit-animation:turn 4s linear forwards; 
 
    -moz-animation-delay:4s; 
 
    -webkit-animation-delay:4s; 
 
    transform-origin:100% 50%; 
 
    z-index:1; 
 
} 
 
.activated:before { 
 
    position:absolute; 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    top:0; 
 
    left:50%; 
 
    background:tomato; 
 
    -moz-animation:turn 4s linear forwards; 
 
    -webkit-animation:turn 4s linear forwards; 
 
    -o-animation:turn 4s linear forwards; 
 
    -ms-animation:turn 4s linear forwards; 
 
    animation:turn 4s linear forwards; 
 
    transform-origin:0% 50%; 
 
    z-index:2; 
 
} 
 

 
@-moz-keyframes turn { 
 
    99.9% { 
 
     transform:rotate(180deg); 
 
     background:tomato; 
 
    } 
 
    100% { 
 
     background:#fff; 
 
    } 
 
} 
 
@-webkit-keyframes turn { 
 
    99.9% { 
 
     transform:rotate(180deg); 
 
     background:tomato; 
 
    } 
 
    100% { 
 
     background:#fff; 
 
    } 
 
} 
 
@-o-keyframes turn { 
 
    99.9% { 
 
     transform:rotate(180deg); 
 
     background:tomato; 
 
    } 
 
    100% { 
 
     background:#fff; 
 
    } 
 
} 
 
@-ms-keyframes turn { 
 
    99.9% { 
 
     transform:rotate(180deg); 
 
     background:tomato; 
 
    } 
 
    100% { 
 
     background:#fff; 
 
    } 
 
} 
 
@keyframes turn { 
 
    99.9% { 
 
     transform:rotate(180deg); 
 
     background:tomato; 
 
    } 
 
    100% { 
 
     background:#fff; 
 
    } 
 
} 
 

 
button { 
 
    background-color: rgba(0, 0, 0, 0); 
 
    border-color: #81ff14; 
 
    color: #81ff14; 
 
    border-radius: 10%; 
 
    float: right; 
 
    margin-right: 100px; 
 
    margin-top: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress"></div> 
 
<button id="battleButton">Battle</button>

deneyin (sizin keman dahil edilmemiştir) kodunda jQuery kütüphanesini eklendi