CODEWITHSUNDEEP
javascriptcssanimationcircularrevealloading-animation
SecondBestChance
SecondBestChance

Reputation: 1

How can I make an lowercase e show up gradually, from center to bottom?

For a little context: the company I work for has a lowercase e as symbol. So I wanted to make a loading icon where this e is gradually being shown. Starting in the center, then to the right and finally completing the circle. (Something like in the below gif)

Figma animation of what I want

Thanks to all

Upvotes: 0

Views: 56

Answers (1)

Amin
Amin

Reputation: 43

create the SVG markup for the loading icon

I used This source for E letter svg

  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-letter-e" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
    <path d="M17 4h-10v16h10" />
    <path d="M7 12l8 0" />
  </svg>

use CSS animations to gradually show the "e" symbol in the loading icon

I defined a keyframe animation named fillE that gradually increases the opacity and scale of the "e" letter to give the loading effect

@keyframes fillE {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

svg {
  width: 100px;
  height: 100px;
}

path {
  animation: fillE 2s ease-in-out infinite;
}

I hope that is what you looking for.

@keyframes fillE {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

svg {
  width: 100px;
  height: 100px;
}

path {
  animation: fillE 2s ease-in-out infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-letter-e" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M17 4h-10v16h10" />
  <path d="M7 12l8 0" />
</svg>

Upvotes: 1

Related Questions