Suck the cat with code! This paper is participating in[Cat Essay Campaign].

Hello, stranger! I am spring brother 🐶, a dream is to touch fish 🐟 front-end engineer.

rendering

Let’s see, what does the so-called cat progress bar look like?

What are the three points of knowledge

To save you time, just throw out the answer:

  1. CSS properties:Mask - image mask
  2. CSS properties:The transition transition

If you already know the chest, you can not continue to look down 😄

background

When a product comes up with some weird design, my gut usually says no 😠😠😠😠. But strangely, when he proposed that “the progress bar could be turned into a moving cat,” I didn’t resist, but rather felt a sense of regret. Why is that? Because cats are so cute!

Step 1: Raw material – a GIF image

At this point we need to prepare a picture of a moving cat, preferably pure black. As follows:

What should I do with this picture? If you have a little bit of Photoshop background, you can definitely do it with the Snap Tool + Paint Bucket tool + Timeline. If you don’t have one, it’s even easier — ask UI colleagues for one.

Step 2: Organize your thoughts

Main idea: Use mask-image mask to outline the appearance of the cat, and then adjust the width of the solid color behind to complete the progress display.

  1. Outline the shape of the cat through a solid cat foreground mask
  2. The progress bar is loaded by adjusting the background color position of the rear scene using Transition

Step 3: Coding

For some reason, I chose to make the foreground and background two different divs and load the progress bar by adjusting the left attribute of the background. Originally I wanted to do everything with a single div, but I ran into some problems, so I settled for two layers. The code is as follows:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <style>
    .target {
      position: relative;
      display: inline-block;
      width: 452px;
      height: 452px;
      -webkit-mask-image: url('./cat-mask.gif');
      mask-image: url('./cat-mask.gif');
      background-color: #e5e5e5;
    }
    .bg {
      position: absolute;
      background-color: red;
      top: 0;
      left: 100%;
      right: 0;
      bottom: 0;
      transition: left 3s ease-in-out;
      -webkit-transition: left 3s ease-in-out;
    }
  </style>
</head>
<body>
  <div>
    <button onclick="updatePercent(20)">Give me up</button>
    <button onclick="updatePercent(-20)">Give me the shrinkage</button>    
  </div>
  <div class="target">
    <div class="bg"></div>
  </div>
</body>
<script>
  let currentPercent = 0
  const setPercent = (percent) = > {
    const el = document.getElementsByClassName('bg') [0]
    el.style.left = `The ${100 - percent}% `
  }
  const updatePercent = (value) = > {
    currentPercent = Math.min(100.Math.max(0, currentPercent + value))
    setPercent(currentPercent)
  }
</script>
</html>
Copy the code

Problems encountered

Question 1: Is there a way to transition from gradient to gradient?

Details: At first, I wanted to adjust the width of the progress bar by adjusting background-Image: Linear-gradient (White 10%, Red 12%, Red 100%). We ran into a situation where background-image was not part of the Transition valid content standard. So is there a way to transition from gradient to gradient?

Question 2: How can I quickly change the style of ::after pseudo-elements?

Question details: I immediately thought of using ::after after, but I didn’t find a good way to directly change the pseudo-element style. If there are big guys with good ideas, please advise me. Thank you.