Skip to content
Search Create account

DEV Community

DEV Community is a community of 605,211 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create new account Log in
loading...

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

View post Full discussion
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