Menu

Beta
Sign in
Beta
Indeterminate Bar SVG element, flat

Indeterminate Bar SVG element, flat

A short filled segment rests in the centre of a long rounded track, without showing a completion percentage. Use it on a connection screen or beneath a pending search.

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/PTtCDDaosbZb/amnt.svg" alt="Indeterminate 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="mist" data-name="Mist"><path d="M137 461c-33 4-56 38-44 69 14 37 53 33 86 33 78 0 157 0 236 0 108 0 215 0 324 0 34 0 68 0 102 0 15 0 31 1 46 0 34-3 56-38 44-69-14-37-54-33-85-33-79 0-158 0-236 0-108 0-216 0-323 0-34 0-68 0-101 0-17 0-33-1-49 0zm266 92c-51-1-46-86 3-82h213c49-2 51 81 2 82l-8 1h-13-10-5-11-4-20-25-88-14z" fill="#e2e2e6" stroke="#e2e2e6"/></g><g id="black" data-name="Black"><path d="M139 449c-82 7-80 122 3 126 27 1 54 0 82 0 56 0 111 0 168 0 83 0 166 0 250 0 56 0 112 0 169 0 26 0 54 3 80-1 78-10 72-122-14-125-83-3-166 1-248 1-113 1-229-1-343-1-48 0-100-4-147 0zm-2 12c16-1 32 0 49 0 33 0 67 0 101 0 107 0 215 0 323 0 78 0 157 0 236 0 31 0 71-4 85 33 12 31-10 66-44 69-15 1-31 0-46 0-34 0-68 0-102 0-109 0-216 0-324 0-79 0-158 0-236 0-33 0-72 4-86-33-12-31 11-65 44-69z" fill="#262625" stroke="#262625"/><path d="M404 482c16-2 33 0 50 0 37 0 76 0 114 0 21 0 55-7 71 11 15 17 4 46-19 49-16 2-33 0-49 0-38 0-77 0-114 0-22 0-57 7-72-10-15-18-4-46 19-50zm215-11h-213c-49-4-54 81-3 82l20 1h14 88 25 20 4 11 5 10 13l8-1c49-1 47-84-2-82z" fill="#262625" stroke="#262625"/></g><g id="cobalt" data-name="Cobalt"><path d="M404 482c-23 4-34 32-19 50 15 17 50 10 72 10 37 0 76 0 114 0 16 0 33 2 49 0 23-3 34-32 19-49-16-18-50-11-71-11-38 0-77 0-114 0-17 0-34-2-50 0z" fill="#2566ed" stroke="#2566ed"/><path d="M406 471h213z" fill="#2566ed" stroke="#2566ed"/><path d="M437 554h88z" fill="#2566ed" stroke="#2566ed"/><path d="M423 554l-20-1z" fill="#2566ed" stroke="#2566ed"/><path d="M550 554h20z" fill="#2566ed" stroke="#2566ed"/><path d="M574 554h11z" fill="#2566ed" stroke="#2566ed"/><path d="M590 554h10z" fill="#2566ed" stroke="#2566ed"/><path d="M613 554l8-1z" fill="#2566ed" stroke="#2566ed"/></g></svg>
CSS background-image
.indeterminate-bar {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/PTtCDDaosbZb/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.indeterminate-bar {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/PTtCDDaosbZb/amnt.svg") center / contain no-repeat;
}
React
import IndeterminateBarSvg from "./indeterminate-bar.jsx"; // from the React tab above

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

Tags

indeterminateloadingbarloaderselementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Indeterminate Bar: Long rounded horizontal track with a short filled segment centred inside it. 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

Settings