CSS circle-progress-bar

Question

I would like to use the progress-bar here at https://bootsnipp.com/snippets/featured/circle-progress-bar, but I don't know how to set less than 50% when you have 2, 3 or more types (each got different percentage) of these on your website, because this code sets right-side of bar for every type u got there and I don't know what to do when I want less than 50% only at 3.

Type of bar:

 .progress .progress-right .progress-bar{
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 1.8s linear forwards;
}

+

    @keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

Could someone help me please ?

user_1602316 · Answer

Using SVG

svg {
  transform: rotate(-90deg);
  stroke-dasharray: 251; /* (2PI * 40px) */
  stroke-dashoffset: 251;
  animation: offsettozero 5s linear forwards;
}

@keyframes offsettozero {
  to {
    stroke-dashoffset: 0;
  }
}

CSS circle-progress-bar

2 Answers