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

Avatar placeholderMateusz Pydych

October 14, 2021

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

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:


// src/styled.tsx
export const LifeLine = styled.div<{ width: number; height: number }>`
  width: ${p => p.width}px;
  height: ${p => p.height}px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg17" version="1.1" viewBox="0 0 39.028072 39.028072"> ');
`;

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.


// src/index.tsx
import React from 'react';
import LifeLine from 'src/styled.tsx';
const LifeLineLoading = (props: { width: number; height: number }) => {
  const { width = 200, height = 200 } = props;
  return (
    <LifeLine
      width={width}
      height={height}
      className="animatend-lifeline-path"
    ></LifeLine>
  );
};

export default LifeLineLoading;

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.


// src/styles.scss

// Lifeline loading animation
.animatend-lifeline-path {
  background: linear-gradient(
      90deg,
      rgba(248, 249, 250, 1) 0%,
      rgba(248, 249, 250, 1) 40%,
      rgba(23, 199, 138, 0.7147233893557423) 50%,
      rgba(248, 249, 250, 1) 60%,
      rgba(248, 249, 250, 1) 100%
    )
    left/200% 100%;
  background-size: 200%;
  animation: dash 1s linear infinite alternate;
}
@keyframes dash {
  to {
    background-position: right;
  }
}

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!

Share on

Newsletter

Subscribe to our quarterly newsletter

Thank you! Check your email for a confirmation link.
Oops! Something went wrong while submitting the form.

Are you looking for a job?

Great, we're looking for tech-savvy people!

Go to careers

Tell us about your project

Get in touch and let’s build your project!
Contact us
White arrow right