3-dots-fade(degrees,rotation,angles,panoramic,points,spots,circles,markers,dots pattern,disappear,dissolve,vanish,dim,gradually disappear) Vector Icon

Tailwind CSS UnoCSS Unplugin Icons Iconify React Vue Svelte Solid

HTML Tag: SEO / AccessibilityJSXSelf closing tag

With @iconify/tailwind: Installation Guide

      <span class="icon-[svg-spinners--3-dots-fade]"></span>

With @egoist/tailwindcss-icons: Installation Guide

      <span class="i-svg-spinners-3-dots-fade"></span>

HTML Tag: SEO / AccessibilityJSXSelf closing tag

      <span class="i-svg-spinners-3-dots-fade"></span>

Installation Guide

Import component:

      import SvgSpinners3DotsFade from '~icons/svg-spinners/3-dots-fade'

Use component:

      <SvgSpinners3DotsFade />

Installation Guide

Iconify Web Component：Installation Guide

      <iconify-icon icon="svg-spinners:3-dots-fade"></iconify-icon>

Iconify URL：

      https://api.iconify.design/svg-spinners:3-dots-fade.svg

With @iconify/react:

      <Icon icon="svg-spinners:3-dots-fade" />

JSX:

      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><circle cx="4" cy="12" r="3" fill="currentColor"><animate id="IconifyId196824606a71755853326062" fill="freeze" attributeName="opacity" begin="0;IconifyId196824606a71755853326063.end-0.25s" dur="0.75s" values="1;.2"/></circle><circle cx="12" cy="12" r="3" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="IconifyId196824606a71755853326062.begin+0.15s" dur="0.75s" values="1;.2"/></circle><circle cx="20" cy="12" r="3" fill="currentColor" opacity=".3"><animate id="IconifyId196824606a71755853326063" fill="freeze" attributeName="opacity" begin="IconifyId196824606a71755853326062.begin+0.3s" dur="0.75s" values="1;.2"/></circle></svg>

Component:

      export function SvgSpinners3DotsFade(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}><circle cx="4" cy="12" r="3" fill="currentColor"><animate id="IconifyId196824606a71755853326062" fill="freeze" attributeName="opacity" begin="0;IconifyId196824606a71755853326063.end-0.25s" dur="0.75s" values="1;.2"/></circle><circle cx="12" cy="12" r="3" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="IconifyId196824606a71755853326062.begin+0.15s" dur="0.75s" values="1;.2"/></circle><circle cx="20" cy="12" r="3" fill="currentColor" opacity=".3"><animate id="IconifyId196824606a71755853326063" fill="freeze" attributeName="opacity" begin="IconifyId196824606a71755853326062.begin+0.3s" dur="0.75s" values="1;.2"/></circle></svg>
  )
}

With @iconify/vue:

      <Icon icon="svg-spinners:3-dots-fade" />

With nuxt-icon:

      <Icon name="svg-spinners:3-dots-fade" />

Component:

      <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><circle cx="4" cy="12" r="3" fill="currentColor"><animate id="IconifyId196824606a71755853326062" fill="freeze" attributeName="opacity" begin="0;IconifyId196824606a71755853326063.end-0.25s" dur="0.75s" values="1;.2"/></circle><circle cx="12" cy="12" r="3" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="IconifyId196824606a71755853326062.begin+0.15s" dur="0.75s" values="1;.2"/></circle><circle cx="20" cy="12" r="3" fill="currentColor" opacity=".3"><animate id="IconifyId196824606a71755853326063" fill="freeze" attributeName="opacity" begin="IconifyId196824606a71755853326062.begin+0.3s" dur="0.75s" values="1;.2"/></circle></svg>
</template>

<script>
export default {
  name: 'SvgSpinners3DotsFade'
}
</script>

With @iconify/svelte:

      <Icon icon="svg-spinners:3-dots-fade" />

Component:

      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><circle cx="4" cy="12" r="3" fill="currentColor"><animate id="IconifyId196824606a71755853326062" fill="freeze" attributeName="opacity" begin="0;IconifyId196824606a71755853326063.end-0.25s" dur="0.75s" values="1;.2"/></circle><circle cx="12" cy="12" r="3" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="IconifyId196824606a71755853326062.begin+0.15s" dur="0.75s" values="1;.2"/></circle><circle cx="20" cy="12" r="3" fill="currentColor" opacity=".3"><animate id="IconifyId196824606a71755853326063" fill="freeze" attributeName="opacity" begin="IconifyId196824606a71755853326062.begin+0.3s" dur="0.75s" values="1;.2"/></circle></svg>

Component:

      export function SvgSpinners3DotsFade(props, key) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><circle cx="4" cy="12" r="3" fill="currentColor"><animate id="IconifyId196824606a71755853326062" fill="freeze" attributeName="opacity" begin="0;IconifyId196824606a71755853326063.end-0.25s" dur="0.75s" values="1;.2"/></circle><circle cx="12" cy="12" r="3" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="IconifyId196824606a71755853326062.begin+0.15s" dur="0.75s" values="1;.2"/></circle><circle cx="20" cy="12" r="3" fill="currentColor" opacity=".3"><animate id="IconifyId196824606a71755853326063" fill="freeze" attributeName="opacity" begin="IconifyId196824606a71755853326062.begin+0.3s" dur="0.75s" values="1;.2"/></circle></svg>
  )
}

Yes I can!

In moments of self-doubt, clench your fist and silently repeat to yourself: "Yes, I can!"