Erstellen einer radialen Fortschrittsbalken mit CSS-Animation auf Knopfdruck

Question

Ich hatte ein großes Problem, dies zu erreichen. Ich verstehe nicht, wie man etwas animiert, so dass es sich in einem Kreis dreht, also habe ich einen funktionierenden von Circle Progress Bar genommen und versuche, einen Weg zu finden, um ihn auf Knopfdruck mit jquery zu animieren. Ich habe versucht, this Tutorial zu verwenden, aber habe keine Ahnung, wie man es richtig einbaut. Bitte helfen Sie. Hier ist meine Fiddle, obwohl es nicht annähernd funktioniert.

.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

Ich änderte $('#progress')-$('.progress') in Ihrer Geige seit ‚Fortschritt‘ eine Klasse und nicht um eine ID. Außerdem habe ich den Stil activatedAfter durch die Stile activated:after und activated:before aus dem Beispiel in der von Ihnen bereitgestellten Verknüpfung ersetzt.

Auch ich hinzugefügt, um die jQuery-Bibliothek im Code (es ist nicht in Ihrer Geige aufgenommen wurde)

Versuchen Sie, diese

$('#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>