CSS Gradiant based dotted progress bar-CodePudding

I am trying to create a CSS gradiant based vertical progress bar as shown in the figure. Sample Image

I want to achieve the followings:

It should only have two colors.
The gradient should be a dotted one (similar to dotted border).
I should be able to set the height of each color. For example, if I want the 30% of the height of the gradient to be gray, the rest of the 70% should be set to green. And there shouldn't be a spread of the color(not sure of the right term).

Any clues on how this can be achieved via CSS only.

I have tried the following code with no success, just pasting it for reference.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 700px;
  width: 10px;
  background-image: linear-gradient(180deg, transparent, transparent 50%, #fff 50%, #fff 50%), linear-gradient(180deg, orange 25%, black 75%);
    background-size: 100% 20px, 100% 700px;

}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>
</html>

CodePudding user response：

You could paint the vertical line n% in lime and then 100% - n% in gray.

Then overlay that with a repeating linear gradient of transparent and white.

.line {
  height: 700px;
  width: 10px;
  background-image: linear-gradient(transparent 0 50%, white 50% 100%), linear-gradient(lime 0 71%, gray 71% 100%);
  background-size: 100% 10%, 100% 100%;
   
}

<div ></div>

CodePudding user response：

You can use mask and gradient like below:

.line {
  height: 300px;
  width: 20px;
  -webkit-mask: radial-gradient(circle closest-side, #000 96%, #0000) 0 0/100% 10%;
  background: linear-gradient(red 60%, blue 0);
}

<div ></div>