Add icons to this collection by clicking the heart icon.
Loading Bar icon - also known as interface, bar, loading, line, load, ui, and loading bar. Created in a clean lineal color style with a white, silver, gray, black, teal, blue, and purple finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="682.667"
height="682.667"
viewBox="0 0 682.667 682.667"
>
<defs>
<clipPath id="a" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
</defs>
<g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 682.667)">
<path
d="M0 0h-30v-165H0c16.568 0 30 13.432 30 30v105C30-13.431 16.568 0 0 0"
transform="translate(474.5 293.5)"
fill="#acd5df"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-60 52.5L0 105c0 16.569-13.432 30-30 30h-407c-16.568 0-30-13.431-30-30V0c0-16.568 13.432-30 30-30h407C-13.432-30 0-16.568 0 0"
transform="translate(474.5 158.5)"
fill="#c4f3ff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-85-52.5L0-105h30V0Z"
transform="translate(444.5 263.5)"
fill="#5515a6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-40-52.5L0-105h219.715V0Z"
transform="translate(224.785 263.5)"
fill="#6241ea"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-40-52.5L0-105h62.428V0Z"
transform="translate(162.357 263.5)"
fill="#2db94d"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-40-52.5L0-105h62.429V0Z"
transform="translate(99.929 263.5)"
fill="#61ce5a"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M37.5 158.5h62.429v105H37.5Z"
fill="#94e368"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15 0-8.284 6.716-15 15-15C-6.716-15 0-8.284 0 0"
transform="translate(271 368.5)"
fill="#6241ea"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15 0-8.284 6.716-15 15-15C-6.716-15 0-8.284 0 0"
transform="translate(211 368.5)"
fill="#6241ea"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15 0-8.284 6.716-15 15-15C-6.716-15 0-8.284 0 0"
transform="translate(331 368.5)"
fill="#6241ea"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-437c-16.568 0-30 13.432-30 30v105c0 16.568 13.432 30 30 30H0c16.568 0 30-13.432 30-30V30C30 13.432 16.568 0 0 0Z"
transform="translate(474.5 128.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-377v105H60V0H30"
transform="translate(414.5 158.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v105"
transform="translate(99.929 158.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v105"
transform="translate(162.357 158.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v105"
transform="translate(224.785 158.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0c0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15 0-8.284 6.716-15 15-15C-6.716-15 0-8.284 0 0z"
transform="translate(271 368.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0c0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15 0-8.284 6.716-15 15-15C-6.716-15 0-8.284 0 0z"
transform="translate(211 368.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0c0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15 0-8.284 6.716-15 15-15C-6.716-15 0-8.284 0 0z"
transform="translate(331 368.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
</svg>
More icons in the same style and category