search

vscode-elements / elements

Web component library for developing Visual Studio Code extensions
https://vscode-elements.github.io
MIT License
156 stars 27 forks source link

Question: How to make icon inside button animated? #177

Closed neko-para closed 1 month ago

neko-para commented 1 month ago

E.g. setting spin property for the vscode-icon inside.

bendera commented 1 month ago

Ooops... That's a good question. I'll come up with a solution soon.

bendera commented 1 month ago

I added some properties/attributes to control the icon animation parameters: icon-spin, icon-spin-duration, icon-after-spin, icon-after-spin-duration Or you can place an animated icon within the button.

<vscode-button>
  <vscode-icon spin spin-duration="1" name="sync" aria-hidden="true"></vscode-icon>
  Loading
</vscode-button>
neko-para commented 1 month ago

I added some properties/attributes to control the icon animation parameters: icon-spin, icon-spin-duration, icon-after-spin, icon-after-spin-duration Or you can place an animated icon within the button.

<vscode-button>
  <vscode-icon spin spin-duration="1" name="sync" aria-hidden="true"></vscode-icon>
  Loading
</vscode-button>

Actually I've tried adding icon directly inside button before, but the icon isn't properly aligned with text. The new icon-spin attribute works.

bendera commented 1 month ago

It wasn't aligned properly, but I also fixed the CSS.