css animated progress bar
.container__progressbars { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap min-width: 270px; width: 100%; min-height: 100%; } .progressbar { position: relative; width: 170px; height: 170px; transform: rotate(-90deg); } .progressbar__svg { position: relative; width: 100%; height: 100%; } .progressbar__svg-circle { width: 100%; height: 100%; fill: none; stroke-width: 10; stroke-dasharray: 440; stroke-dashoffset: 440; stroke: white; stroke-linecap: round; transform: translate(5px, 5px); } .circle-html { stroke: #007bff; /*Set this for the duration of the animation*/ animation: anim_circle-html 2s ease-in-out forwards; } .progressbar__text { position: absolute; top: 50%; left: 50%; padding: 0.25em 0.5em; color: #000; /*Change this to change progressbar text*/ font-weight: bold; border-radius: 0.25em; transform: translate(-50%, -50%) rotate(90deg); } @keyframes anim_circle-html { to {stroke-dashoffset: 0;} }
Source: eolnuha.com
css animated progress bar
<div class="container__progressbars"> <div class="progressbar"> <svg class="progressbar__svg"> <circle cx="80" cy="80" r="70" class="progressbar__svg-circle circle-html"></circle> </svg> <span class="progressbar__text">HTML</span> </div> <!--You can add other progress bars here--> </div>
Source: eolnuha.com