2/6 Kreiss 1/3 Kreiss
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?
Der hier verwendete 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>