basti1012.bplaced.net

Und so weiter… Ganzer Kreis ,halber kreis und 3/4Kreis kann man ja mit CSS gestalten, weiß nur nicht mehr wie? Wie sieht es mit anderen Größen aus. Wenn das geht ,ist das auch mit den Border möglich?

Code

                                    
                                <script src="/js_webseite/jquery.js"></script>
<style>
  #rein{
  text-align:center;
  font-size:60px;
  font-weight:900;
}


.circle {
  position: relative;
  width:200px;
  height:200px;
  margin:60px auto;
 
}

.circle .mask {
    text-align:center;
    position: absolute;
    line-height: 200px;
    height:200px;
    width: 200px;
}

.circle.start  .circle_animation {
  stroke-dasharray: 880 ;
}
.circle.start .circle_animation {
  forwards;
    animation: html 2.5s normal forwards;
}

  
</style>
<div id="rein"></div>
<div class="circle start">
     <div class="mask"><span>100,000</span></div> 
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle id="circle" class="circle_animation" r="45" cy="100" cx="100" stroke-width="90"  stroke="black" fill="none"/>
    </svg>
</div>
<input type="text" id="pro">

<script>
  $('#pro').change(function(){
  
g=$('#pro').val();
 document.getElementById('rein').innerHTML=g+'%';
  h=g*2.91+593
 
  $('.circle.start  .circle_animation').attr('stroke-dashoffset',h);
  
  })
</script>