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

Mateusz Pydych
14 October 2021 · 2 min read

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"> <path d="m 6.7508131,21.746469 5.8646679,-1.497175 2.730564,-7.537142 4.192091,9.393136 4.162213,-9.393136 2.690658,7.537142 6.025785,1.497175 h -6.895818 l -2.030078,-4.925827 -3.95276,8.861449 -4.004485,-8.845338 -2.032025,4.909716 z"/></svg>');
`;

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!

Join our team

Read also:

Flask vs Django - a fair comparison

Open source NFT marketplace

Kubernetes from scratch

Share on
Related posts
9 Bespoke software development mistakes to avoid
SOFTWARE DEVELOPMENT

9 Bespoke software development mistakes to avoid

If making custom software was easy, everybody would build their own apps and there wouldn’t be a shortage of programmers. Unfortunately, the only thing that’s easy about software development is making…
9 min read
A11y: Web Accessibility Definition And Guidelines
SOFTWARE DEVELOPMENT

A11y: Web Accessibility Definition And Guidelines

Hundreds of millions of people use the internet on a daily basis. It can easily be overlooked, but we should always make sure your website is accessible to everyone, regardless of their disability…
7 min read

Tell us about your project

Get in touch and let’s build your project!