How do I create dual-coloured rings in CSS?

Question

How do I do the rings in this design in CSS and/or JS?

The number of icons is dynamic.

• First icon is all grey
• Icons in-between a mix of grey and blue
• Last icon is a blue gradient

It is a requirement for the rings to be dynamic; not part of the image.

Answer 1

You can create pseudo-element (:before) in the background with extra height and width than the actual element. Then use conic-gradient as background for that pseudo element.

Check the below example:

.knob {
  position: relative;
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.knob:before {
    content: ' ';
    position: absolute;
    display: block;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 50%;
    background-image: conic-gradient(#006, #00f 25%, #888 0);
    transition: transform .5s ease-in-out;
    z-index: -2;
}

<div class="knob">25%</div>

For customization options, check the below CodePen link.

https://codepen.io/rohitutekar/pen/BadOgmg