Go back
Ulam Labs Logo

How To Create Your Own Loading Circle | Ulam Shorts - For Developers

How To Create Your Own Loading Circle | Ulam Shorts - For Developers

October 14, 2021
, by 
Mateusz Pydych

Using standard loading circles is boring. That's why at Medishout we create our own.

Making use of our logo and primary brand color, we created unique loading circles vastly improving the look of our UI.

Here's how it works:

  • First, we masked the rectangle-shaped div element with the SVG path.
  • Then added a vertical linear background double in length to the rectangle itself.
  • Lastly, to make the circle move, we used the CSS @keyframes property.

Example of an implementation using React and styled-components:

Here I defined the styled div with width and height as props and hardcoded SVG mask. Now it can be wrapped by a functional component, with a proper CSS class.

Up to this point, nothing too special has happened. Just a regular React component. All the magic is in the CSS, under the animated-lifeline-path class.

Now we have a background that has a linear gradient twice as wide as the div it's attached to. It has infinite alternating animation defined that takes 1 second to loop.

As a result, it will render a vertical gradient bar that travels from left to right. And as its parent is masked by the brand logo, only the unmasked part is visible.

And that's it! You can now sit back and admire your new unique loading circle after just 5 minutes of work!

Good luck and may all your future project loading screens look amazing!

Have questions regarding developing
your project?

Get in touch

Latest stories

Read more stories about Ulam Labs and crypto-space wrote by our specialists and engineers.

No items found.