Menu

Beta
Sign in
Beta

Colours and style

Every picture in the library follows these, and so does every download.

Colour of single-colour icons
Palette for colourful pictures
As drawn
100%
Progress Bar SVG element, flat

Progress Bar SVG element, flat

A long rounded track is mostly filled from the left to show near completion. Place it on an installation screen or beside a form submission status.

Free · from Loaders elements, flat · Set 2

Similar SVGs

More from Loaders elements, flat · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Yb4Kxrpp4C-e/amnt.svg" alt="Progress Bar" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="turquoise" data-name="Turquoise"><path d="M95 449c-46 6-59 70-16 89 14 7 29 5 44 5 68 0 137 0 206 0 94 0 188 0 283 0 38 0 93 4 129 0 47-5 59-70 16-89-14-7-29-5-43-5-69 0-138 0-206 0-95 0-190 0-284 0-37 0-95-4-129 0z" fill="#04d1c3" stroke="#04d1c3"/></g><g id="navy" data-name="Navy"><path d="M92 437c-37 4-61 44-49 79 14 43 57 39 94 39 88 0 176 0 265 0 88 0 177 0 266 0 60 0 121 0 182 0 27 0 55 3 82 0 38-4 61-44 49-78-14-44-56-40-93-40-89 0-177 0-265 0-89 0-178 0-266 0-60 0-121 0-180 0-28 0-58-3-85 0zm3 12c34-4 92 0 129 0 94 0 189 0 284 0 68 0 137 0 206 0 14 0 29-2 43 5 43 19 31 84-16 89-36 4-91 0-129 0-95 0-189 0-283 0-69 0-138 0-206 0-15 0-30 2-44-5-43-19-30-83 16-89z" fill="#091e4d" stroke="#091e4d"/></g></svg>
CSS background-image
.progress-bar {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Yb4Kxrpp4C-e/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.progress-bar {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Yb4Kxrpp4C-e/amnt.svg") center / contain no-repeat;
}
React
import ProgressBarSvg from "./progress-bar.jsx"; // from the React tab above

<ProgressBarSvg width={48} height={48} />

Tags

progressbarloadingloaderselementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Progress Bar: Long rounded horizontal track, mostly filled from the left. A flat element. as part of the pack Loaders elements, flat · Set 2. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Browse the library

Settings