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%
Three Dots SVG element, flat

Three Dots SVG element, flat

Three large, evenly spaced dots make a simple waiting indicator. Use them in a messaging conversation or beneath a preview that is still being generated.

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/8gb7CL11F0Sy/amnt.svg" alt="Three Dots" 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="blue" data-name="Blue"><path d="M501 379c-24 2-46 12-65 26-104 77-46 250 85 241 25-2 50-12 69-28 97-81 43-250-89-239z" fill="#017ffc" stroke="#017ffc"/><path d="M823 378c-127 4-171 182-65 248 22 14 47 21 72 20 29-1 57-14 78-32 91-80 40-240-85-236z" fill="#017ffc" stroke="#017ffc"/><path d="M194 377c-28 1-54 12-76 30-92 77-45 241 82 236 27-1 53-11 75-29 92-77 45-241-81-237z" fill="#017ffc" stroke="#017ffc"/></g><g id="navy" data-name="Navy"><path d="M500 363c-26 2-51 13-72 28-117 88-55 281 95 271 29-2 58-15 80-34 105-92 43-277-103-265zm1 16c132-11 186 158 89 239-19 16-44 26-69 28-131 9-189-164-85-241 19-14 41-24 65-26z" fill="#011a53" stroke="#011a53"/><path d="M822 362c-32 2-63 15-88 36-104 90-44 266 98 263 34-1 67-16 92-40 95-95 35-265-102-259zm1 16c125-4 176 156 85 236-21 18-49 31-78 32-25 1-50-6-72-20-106-66-62-244 65-248z" fill="#011a53" stroke="#011a53"/><path d="M193 361c-30 2-59 13-83 32-106 87-53 272 91 266 141-6 189-197 74-274-24-16-53-25-82-24zm1 16c126-4 173 160 81 237-22 18-48 28-75 29-127 5-174-159-82-236 22-18 48-29 76-30z" fill="#011a53" stroke="#011a53"/></g></svg>
CSS background-image
.three-dots {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/8gb7CL11F0Sy/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.three-dots {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/8gb7CL11F0Sy/amnt.svg") center / contain no-repeat;
}
React
import ThreeDotsSvg from "./three-dots.jsx"; // from the React tab above

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

Tags

ellipsiswaitingdotsloaderselementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Three Dots: Three large equal dots evenly spaced in a horizontal row. 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