Menu

Beta
Sign in
Beta
Loading Circle SVG element, flat

Loading Circle SVG element, flat

This thick circle has a small gap at the top, leaving its centre open. It works beside an updating dashboard figure or on a file preview screen.

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/1VyQf-IHgUFj/amnt.svg" alt="Loading Circle" 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="teal" data-name="Teal"><path d="M429 109c-33 4-69 20-98 35-134 71-221 211-220 362 1 187 141 356 324 391 338 64 590-292 425-592-34-61-85-113-145-149-30-19-98-50-132-47-38 4-54 52-26 78 9 8 20 11 32 14 85 21 157 81 198 158 93 176-9 398-201 444-198 47-393-108-384-313 4-92 50-179 122-235 38-29 78-44 123-57 55-16 41-96-18-89z" fill="#05b5a6" stroke="#05b5a6"/></g><g id="black" data-name="Black"><path d="M430 96c-34 4-70 19-100 34-138 69-225 210-232 363-8 189 132 368 315 413 202 49 407-59 484-252 19-49 31-104 29-156-2-64-17-123-44-180-30-61-77-117-133-155-38-27-79-47-123-59-14-4-29-9-43-8-38 3-61 39-51 74s42 39 72 49c15 4 30 10 44 18 38 20 72 48 99 83 123 160 53 399-140 464-199 66-409-94-391-305 8-92 58-177 136-228 16-10 33-19 51-26 24-10 55-11 75-30 39-39 5-104-48-99zm-1 13c59-7 73 73 18 89-45 13-85 28-123 57-72 56-118 143-122 235-9 205 186 360 384 313 192-46 294-268 201-444-41-77-113-137-198-158-12-3-23-6-32-14-28-26-12-74 26-78 34-3 102 28 132 47 60 36 111 88 145 149 165 300-87 656-425 592-183-35-323-204-324-391-1-151 86-291 220-362 29-15 65-31 98-35z" fill="#03161e" stroke="#03161e"/></g></svg>
CSS background-image
.loading-circle {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/1VyQf-IHgUFj/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.loading-circle {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/1VyQf-IHgUFj/amnt.svg") center / contain no-repeat;
}
React
import LoadingCircleSvg from "./loading-circle.jsx"; // from the React tab above

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

Tags

loadingcirclewaitloaderselementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Loading Circle: Thick open circle with a small gap at the top. 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