animated Border around Circle

Question

私は同じ幅と高さのボーダー半径50％のdivを持っています。リンクに表示されているように、このdivの周りに境界線が必要です。

`https://codepen.io/anon/pen/MbWagQ` 

円のdivには同じアニメーションが必要です。

Answer 1

.draw { 
     -webkit-transition: color 0.25s; 
     transition: color 0.25s; 
     border-radius: 50%; 
    } 
    .draw::before, .draw::after { 
     border-radius: 50%; 
     border: 3px solid transparent; 
     width: 0; 
     height: 0; 
    } 
div { 
     background: none; 
     border: 0; 
     box-sizing: border-box; 
     color: #f45e61; 
     font-size: inherit; 
     font-weight: 700; 
     padding: 1em 2em; 
     text-align: center; 
     margin: 20px; 
     position: relative; 
     vertical-align: middle; 
     width:100px; 
    } 
    div::before, div::after { 
     box-sizing: border-box; 
     content: ''; 
     position: absolute; 
     width: 100%; 
     height: 100%; 
    } 

とhtml

<div class="draw">draw</div>