DEV Community

loading...

Discussion on: How to Create a Loading Spinner Animation with HTML and CSS

Collapse
jfbrennan profile image
Jordan Brennan • Edited

Nice! You could use the custom tag and attributes pattern for this and have a nice component API (but of course pick a better tag prefix than foo):

<foo-loader loading role=“status”>
  <foo-loader-dot></foo-loader-dot>
  <foo-loader-dot></foo-loader-dot>
  <foo-loader-dot></foo-loader-dot>
  <foo-loader-dot></foo-loader-dot>
</foo-loader>
Enter fullscreen mode Exit fullscreen mode

Target the presence of the loading attribute to adjust the styles to pause or unpause the animation or maybe hide/show the loader