HTML5 customization customization element

Progressbar is an element like and rarely found on websites (as opposed to selektov, checkboxes, input and other things), but still no ui-kit will do without it.

At the moment, HTML5 provides us with a native progress element, the basic functionality of which is supported by almost all modern browsers ( caniuse.com/#feat=progress ).
')
But on the basic possibilities of stylization, for example, IE11, to put it mildly, you will not get far. I still want the progress bars to be with animation, gradient, smooth change of the progress slider, and most importantly with the output values ​​in percent.

In this article I will try to show how to customize the progress bar, based on two conditions:

1. No js. All styling is done exclusively by CSS;
2. In the subsequent work with the customized progress bar, we must work exclusively with it (change the value and not think about the need to change the width of the slider or substitute the correct percentage).

That is, if we want to set the value of the progress bar to 50%, we do something like the following, and nothing more:

document.getElementById('progress').value = '50'; 

At once I will say that during layout I always try to use CSS tools to the maximum, as much as possible without resorting to JS. So this way may seem unnecessary to someone. Also in the example the preprocessor will be used, since without it, writing the necessary styles for a very long time. I prefer LESS, but when writing this article I never found any sanity sandbox with LESS support. So the example will be SCSS.

So let's start with basic HTML markup:

 <div class="progress"> <progress max="100" value="0"></progress> <div class="progress-value"></div> <div class="progress-bg"><div class="progress-bar"></div></div> </div> 

Hide the native element :

 .progress { font: 12px Arial, Tahoma, sans-serif; position: relative; overflow: hidden; } .progress progress { position: absolute; width: 0; height: 0; overflow: hidden; left: -777px; } .progress-bar { overflow: hidden; background: #ac92ec; width: 0; height: 100%; position: absolute; top: 0; left: 0; } .progress-value { color: #333; display: block; line-height: 21px; text-align: center; } .progress-bg { background: #e6e9ed; position: relative; height: 8px; border-radius: 5px; overflow: hidden; } 

Next, we direct the beauty :

 .progress-bar:after { background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; } 

Adding animation :

 @keyframes progress_bar { 0% { background-position: 0 0; } 100% { background-position: -40px 0; } } .progress-bar { transition: width 1s linear; } .progress-bar:after { animation: progress_bar 0.8s linear infinite; } 

And the most important point is putting down the width for progress, and the numerical value in percent. Everything is simple, the logic will be as follows:

 .progress progress[value="1"] + .progress-value:before { content: "1%"; } .progress progress[value="1"] ~ .progress-bg .progress-bar { width: 1%; } 

As it is not difficult to guess, we need exactly 100 such rules, and for this we need preprocessors:

SCSS code:

 @for $i from 0 through 100 { .progress progress[value="#{$i}"] { & + .progress-value:before { content : '#{$i}%' } & ~ .progress-bg .progress-bar { width: $i * 1% } } } 

LESS code:

 .generate-progress(@n, @i: 0) when (@i =< @n) { .progress progress[value="@{i}"] { & + .progress-value:before { content : '@{i}%' } & ~ .progress-bg .progress-bar { width: @i * 1% } } .generate-progress(@n, (@i + 1)); } .generate-progress(100); 

The final example .

Of course there is a big minus - a lot of CSS output. But for me the advantages of this method overlap the huge CSS code.