Beta

Circular Progress SVG element, flat

Free

A thin circular track surrounds a solid dot, with one quarter of the track drawn thicker. Use it on a task list or a device setup screen.

Sign in to download. Free SVGs are free with any account.

circularprogressstatusloaderselementflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/NxodaOs3i35I/amnt.svg" alt="Circular Progress" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor" aria-hidden="true"><circle cx="24" cy="24" r="19" fill="none" stroke="currentColor" stroke-width="2"/><path d="M24 5 A19 19 0 0 1 43 24" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="butt"/><circle cx="24" cy="24" r="5"/></svg>
CSS background-image
.circular-progress {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/NxodaOs3i35I/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.circular-progress {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/NxodaOs3i35I/amnt.svg") center / contain no-repeat;
}
React
import CircularProgressSvg from "./circular-progress.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Circular Progress: Thin circular track surrounding a solid central dot, with one quarter of the track thickened. as part of the pack Loaders elements, flat. Want one like it? Make your own in the SVG studio.

Rest of Loaders elements, flat

Whole pack

Similar SVGs

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