ボタンをクリックすると半円アニメーションが開始されます

Question

サークルローダーを実行しようとしています。しかし、を試してみるとアニメーションを起動する方法が見つかりませんでしたボタンを押してください。

アイデア？

<div class="chart-skills"> 
    <div class="liElem" id="eins"></div> 
</div> 

<div class="chart-skills" id="bottom"> 
    <div class="liElem" id="zwei"></div> 
</div> 

<button onclick="myFunction()">Try it</button> 

ここでコード：https://jsfiddle.net/pzc41skn/

Answer 1

ここでは、ボタンのクリックでアニメーションを実現することができる方法である。

function myFunction() { 
 
    $('.liElem').remove(); 
 
    $(".chart-skills").html('<div class="liElem" id="eins"></div>'); 
 
}

body { 
 
    font: normal 16px/1.5 'Roboto', sans-serif; 
 
    padding: 130px 0 0 0; 
 
    background: #f1f1f1; 
 
} 
 

 

 
/* RESET STYLES 
 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
 

 
.chart-skills { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.chart-skills *, 
 
.chart-skills::before { 
 
    box-sizing: border-box; 
 
} 
 

 

 
/* CHART-SKILLS STYLES 
 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
 

 
.chart-skills { 
 
    position: relative; 
 
    width: 350px; 
 
    height: 175px; 
 
    overflow: hidden; 
 
} 
 

 
.chart-skills::before, 
 
.chart-skills::after { 
 
    position: absolute; 
 
} 
 

 
.chart-skills::before { 
 
    content: ''; 
 
    width: inherit; 
 
    height: inherit; 
 
    border: 45px solid rgba(211, 211, 211, .3); 
 
    border-bottom: none; 
 
    border-top-left-radius: 175px; 
 
    border-top-right-radius: 175px; 
 
} 
 

 
.chart-skills::after { 
 
    content: ''; 
 
    left: 50%; 
 
    bottom: 10px; 
 
    transform: translateX(-50%); 
 
    font-size: 1.1rem; 
 
    font-weight: bold; 
 
    color: cadetblue; 
 
} 
 

 
.chart-skills .liElem { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    width: inherit; 
 
    height: inherit; 
 
    border: 45px solid; 
 
    border-top: none; 
 
    border-bottom-left-radius: 175px; 
 
    border-bottom-right-radius: 175px; 
 
    transform-origin: 50% 0; 
 
    transform-style: preserve-3d; 
 
    backface-visibility: hidden; 
 
    animation-fill-mode: forwards; 
 
    animation-duration: .4s; 
 
    animation-timing-function: linear; 
 
} 
 

 
.chart-skills #eins { 
 
    z-index: 4; 
 
    border-color: green; 
 
    animation-name: rotate-one; 
 
    animation-delay: .4s; 
 
} 
 

 
.chart-skills #zwei { 
 
    z-index: 4; 
 
    border-color: green; 
 
    animation-name: rotate-one; 
 
    animation-delay: .8s; 
 
} 
 

 

 

 
@keyframes rotate-one { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(180deg); 
 
    /** 
 
    * 32% => 57.6deg 
 
    * 57.6 + 21.6 => 79.2deg 
 
    */ 
 
    } 
 
} 
 

 
#bottom { 
 
    transform: scale(-1); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="chart-skills"> 
 
    <div class="liElem" id="eins"></div> 
 

 
</div> 
 

 
<div class="chart-skills" id="bottom"> 
 
    <div class="liElem" id="zwei"></div> 
 
</div> 
 

 
<button onclick="myFunction()">Try it</button>