0

I want to use bottom border of input element as a progress bar for visualizing upload progress. The closest thing I got is to use pseudo element ::after. Right now I have a code like this:

.under-upload::after {
  content: '';
  position: relative;
  display: block;
  height: 2px;
  background: red;
  transform: scaleX(0);
}


<input type="file" class="under-upload">

And in axios I use function, that returns value from 0 to 1 and I want to use this value in the transform: scaleX() to show upload progress. How should I do that or there are better alternatives?

Zhurik
  • 126
  • 3
  • 13
  • You could always add a loader icon to the button. Hide it initially and once submitted show the icon. See examples here - https://www.jqueryscript.net/loading/Form-Submit-Buttons-with-Built-in-Loading-Indicators-Ladda.html – Brian Wiltshire Sep 23 '20 at 16:12
  • 1
    [The canonical duplicate](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin), specifically [Temani Afifi's answer](https://stackoverflow.com/a/49618941/1169519). – Teemu Sep 23 '20 at 16:19

0 Answers0