How to mark up the animation of the filling of the scale?

Before me stood the task to make a scale
5b5188f90e811820540472.png
Must be filled slowly, and in the course of its filling up these entries.
Ascent records on time I will make myself easily, please tell me how to make it a gradient scale, and shaped like that?
June 3rd 19 at 19:33
2 answers
June 3rd 19 at 19:35
Solution
If the complexity of the pictures are absolutely outrageous, you can always take and use svg. I did here: at the bottom of the timeline. But here it is necessary to synchronize size, in your case the solution is simpler.

If the width of the site fixed, it's just going to use 2 div, one above the other (i.e., the second position=absolute). Inside verhnego is another with the width of the site (And it should be position=absolute right=0. In this image the gray timeline. The timeline itself can be made of ordinary div-s from left to right in flexbox-e or floatage. div with rounded corners is a point, with a margin on the top and lower height - line. And in the first diva (which is below) you are the same timeline, but already colored. To calculate color gradient to it - is not difficult. Well, all the magic in the second block, which is absolute. He stamped right=0, and reducing its width you will little by little to hide the gray timeline, and in its place will appear a color
I'm sure it's the right decision, only because of small experience, it is very difficult to understand your words without a code, could you help with the code? I'm sorry that I chew, it's just really important for me to understand right now. - Pascale_Dic commented on June 3rd 19 at 19:38
Here, made! - gerard_Stamm commented on June 3rd 19 at 19:41
Thank you ogromnoe!!! It's super easy! - Pascale_Dic commented on June 3rd 19 at 19:44
I that thought about css transition instead of using js - Chelsea_Bauch31 commented on June 3rd 19 at 19:47
Well, absolutely no js here, as no - need to start a transaction. And the rest - I just wanted to show the band working and so I was faster to make - gerard_Stamm commented on June 3rd 19 at 19:50
June 3rd 19 at 19:37
Try something like this:
https://codepen.io/saundefined/pen/pZNOGX
As needed, decrease the gray scale from 100% to 0

Code
<div class="scale">
 <div class="scale__line" style="width: 40%"></div>
 <div class="scale__points">
 <span class="scale__point" style="left: 30%"></span></div>
 <span class="scale__point" style="left: 60%"></span></div>
 


.scale {
 position: relative;
 height: 50px;
 background: linear-gradient(90deg, #e66465, #9198e5);
 width: 100%;
 transition: width 0.5 s;
}
.scale--ended {
 width: 0;
}
.scale__line {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 background: #cacaca;
}
.scale__points {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}
.scale__point {
 width: 70px;
 height: 50px;
 position: absolute;
 top: 0;
 overflow: hidden;
}
.scale__point:after{
 content: ";
 display: block;
 position: absolute;
 left: 10px;
 top: 0;
 border-radius: 100%;
 width: 50px;
 height: 50px;
 box-shadow: 0px 0px 0px 50px #FFFFFF;
}

Thank you Bolshoe, it's something close) And there is no way to make the circles in the middle, and animate the scale? - Pascale_Dic commented on June 3rd 19 at 19:40
I suspect that the circles will be all that bad - gerard_Stamm commented on June 3rd 19 at 19:43
, how to animate scale in js
document.getElementById('scale__line').style.width = 'n%';


with circles, indeed, have to Tinker :) - Pascale_Dic commented on June 3rd 19 at 19:46
Updated code in first comment - Chelsea_Bauch31 commented on June 3rd 19 at 19:49

Find more questions by tags jQueryCSSHTMLJavaScript