preface

In my eighth article on component design, I’m going to take you five minutes to implement a very creative loading component. The core knowledge is mainly related to CSS3 features, if you are very familiar with, you can directly skip the introduction to see the text.

Always ask yourself: Are you creative?

[Note] General classification of front-end components:

  • Generic components: Button, Icon, etc.
  • Layout components: Grid, Layout, etc.
  • Navigation components: Breadcrumb, Dropdown, Menu, etc.
  • Data entry components: such as form, Switch, Upload file Upload, etc.
  • Data presentation components: Avator profile, Table, List, etc.
  • Feedback components: Progress bars, drawers, Modal dialog boxes, etc.
  • Other Business Types

So when we design the component system, we can refer to the above classification, which is also the classification method of antD, Element, Zend and other major UI libraries.

If you are not familiar with react/ Vue component design principles, please refer to my previous component design series:

  • Master React/Vue Component Design implements a robust Alert component
  • Master React/Vue Component Design implements a powerful Drawer component in conjunction with React Portals
  • Implement a Tag component and an Empty component in 5 minutes of React/Vue Component Design Mastery
  • Master React/Vue Component Design creates materialui-like button click animations with pure CSS and encapsulates react components
  • Quickly implement a customizable progress bar component in Master React/Vue Component Design
  • Master React/Vue Component Design: Repackaging a real-time preview JSON editor component in JsonEditor (React version)

I have published the component library on NPM, and you can experience the components through the NPM installation.

The body of the

Before starting component design, I hope you have a basic knowledge of CSS3 and JS, and understand the basic React /vue syntax. Let’s take a look at the component after implementation:

1. Component design ideas

Following the principles of component design outlined by the author earlier, our first step is to identify requirements. First of all, we design is not the background management system dedicated to the loading animation, but as a C-end product function of the loading animation. We all know the role of loading animation is: while the user is waiting for the page to see useful information, such as site introduction, guidance, company information, and so on, ease user anxiety. As a product manager or user experience engineer, this kind of personalized loading experience is often better.

And the loading animation will generally be divided into strategic loading animation and general loading animation, general loading animation I will not say, most of the system you usually do should be general loading animation. Here I introduce the strategic loading animation: Strategic loading animations are often used in C-end products or systems to provide more guidance to users when they first visit the system or website. Due to some kind of active guidance (the load information that the website intentionally shows to the user when loading or changing pages) or environmental reasons (the loading is slow due to the network, bandwidth limit, and then the loading animation), the load information is often used for some purpose, such as for personal blog sites, This loading animation can be the introduction of the blogger, the publicity information of the blogger,github address, etc. For enterprises, it may be the introduction of a new function, the introduction of website service information, contact information, etc.

With that background in mind, let’s look at the component design wireframes:

Through the above requirements analysis, in fact, a loading animation is very simple, does not involve too many functions, mainly lies in the use of CSS3 animation. The specific attributes are:

  • The load text when the load animation appears
  • State that controls the loading state

Let’s look at the implementation.

2. Implement a Loading component based on React

Since this component doesn’t involve much JS code, mainly HTML and CSS, let’s directly build the structure of the component first:

/** * Skeleton Screen Component (SEO) * @param {isLoading} bool Load status * @param {loadingText} String Load text */
export default function Skeleton(props) {
  let { isLoading = true, loadingText = 'Loading frantically for you... ' } = props
  return isLoading ? <div className={styles.skeletonWrap}>
    <div className={styles.skeletonContent} data-loadingText={loadingText}>Custom bootstrap content</div>
  </div> : null
}
Copy the code

The custom guide content here I will not introduce, mainly according to the different website nature flexible configuration. I’ll focus on the load animations, but the idea is pretty simple: we’ll animate the curtains using a ::after pseudo object on top of our skeletonContent.

You’d better know something about keyframe animation before you implement it, and I’m sure you all do. One way to do this is to control the element width from 0 to 100% and then add the appropriate optimization. The code for the animation is as follows:

@keyframes spread {
  0% {
    width: 0;
  }
  100% {
    width: 100%; }}Copy the code

We just need to use this in ::after:

&::after {
  animation: spread 18s 3s infinite;
}
Copy the code

So the animation is done, but in order to complete the animation, let’s also consider the fact that if the curtain width changes slowly from 0, the text that loaded the animation will stay the same color all the time, as shown below:

&::after {
  color: rgba(255.255.255.0);
  animation: spread 18s infinite;
}
@keyframes spread {
  0% {
    width: 0;
    color: rgba(255.255.255.0);
  }
  100% {
    width: 100%;
    color: rgba(255.255.255.1); }}Copy the code

The effect is as follows:

Finally, let’s implement loadingText. This is also a part of the knowledge, because the loadingText is mainly used to decorate the elements, and there is not much semantic scene, so we will put it in the content of the ::after pseudo-object. But generally content is written in CSS, so how do you implement dynamic text? The API. Content can receive not only a string, but also the keyword attr. The content inside the keyword is a custom attribute of the element, such as:

<div data-tip="loading"></div>
Copy the code

So we can use the value of the data-tip property directly in CSS in this way:

div::after{
    content: attr(data-tip)
}
Copy the code

You can use ::after to get the data tip’s content. Content has many more features, such as a pure CSS counter.

In this case, our Loading component is complete. Another question is the naming of the component in my code. Why is it called skeleton? We can change the structure of the content and it becomes a skeleton screen immediately, so the name of the section can be determined according to the actual needs.

3. Robustness support, we use the propTypes tool provided by React:

import PropTypes from 'prop-types'
// ...
Skeleton.propTypes = {
  isLoading: PropTypes.bool,
  loadingText: PropTypes.string
}
Copy the code

The complete CSS code of the component is as follows:

.skeletonWrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0.0.0.6);
  .skeletonContent {
    position: relative;
    margin: 200px auto 0;
    padding: 20px;
    width: 800px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    &::after {
      content: 'Loading frantically for you... ';
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0;
      height: 100%;
      border-right: 2px solid #ccc;
      box-shadow: 0 0 8px # 000;
      background: # 096;
      color: rgba(255.255.255.0);
      font-size: 24px;
      white-space: nowrap;
      animation: spread 18s 3s infinite;
    }
    @keyframes spread {
      0% {
        width: 0;
        color: rgba(255.255.255.0);
      }
      100% {
        width: 100%;
        color: rgba(255.255.255.1); }}.imgBox {
      margin-right: 20px;
      width: 400px;
      .img {
        width: 100%;
        height: 200px;
        background-color: #ccc;
      }
      img {
        width: 100%; }}.rightBox {
      flex: 1;
      .tit {
        margin-top: 8px;
        margin-bottom: 8px;
        font-size: 22px;
      }
      .labelWrap {
        span {
          margin: 3px;
          display: inline-block;
          font-size: 12px;
          padding: 2px 6px;
          border-radius: 3px;
          color: #fff;
          background-color: #58bd6b; }}.desc {
        color: rgb(44.44.44);
        font-size: 14px; }}}}Copy the code

About the use of CSS module and classNames in the code you can go to the official website to learn, very simple. If you don’t understand can ask questions in the comment area, the author will see the first time to answer.

4 Use the Skeleton component

We can use it in the following ways:

<Skeleton loadingText="Deadly loading..." />
Copy the code

I have published the implemented components to NPM. If you are interested, you can directly use NPM after installation. The method is as follows:

npm i @alex_xu/xui

/ / import xui
import { 
  Button,
  Skeleton,
  Empty,
  Progress,
  Tag,
  Switch,
  Drawer,
  Badge,
  Alert
} from '@alex_xu/xui'
Copy the code

This component library can be imported on demand. We only need to configure babel-plugin-import in the project. The specific configuration is as follows:

// .babelrc
"plugins": [["import", { "libraryName": "@alex_xu/xui"."style": true}]]Copy the code

The NPM library screenshot is as follows:

The last

The author will continue to implement

  • Modal window,
  • The badge (logo),
  • The table (table),
  • Tooltip (tooltip bar)
  • Skeleton screen,
  • Message(global prompt),
  • The form (form form),
  • The switch (switch),
  • Date/calendar,
  • Qr code recognizer component

And other components, to repeat the author of many years of componentization journey.

If you want to get the complete source code of component design series, or want to learn more H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and practical, welcome to join our technical group in the public number “interesting talk front end” to learn and discuss together, Explore the boundaries of the front end together.

More recommended

  • 2 years of vUE project practical experience summary
  • Javascript Design Patterns front-end Engineers Need to Know in 15 minutes (with detailed mind maps and source code)
  • In 2019, take a look at some of my top questions and advice for job seekers
  • A picture shows you how to play vue-Cli3 quickly
  • Vue Advanced Advanced series – Play with Vue and vuex in typescript
  • “Front-end combat summary” the use of pure CSS website skin and focus diagram switch animation
  • “Front-end combat summary” using CSS3 to achieve cool 3D rotation perspective
  • Add a loading progress bar to your site using pace. Js
  • The Application of design Pattern of “Summary of Front End Actual Combat” — Memorandum Pattern
  • “Front End Combat Summary” using postMessage to achieve pluggable cross-domain chatbot
  • “Front-end combat summary” of the variable promotion, function declaration promotion and variable scope detailed explanation
  • “Front-end combat summary” how to change the URL without refreshing the page