Create advanced loading screens using CSS-CSS Tutorial-php.cn

Create advanced loading screens using CSS

WBOY

Release： 2023-09-17 23:13:02

forward

584 people have browsed it

使用 CSS 创建高级加载屏幕

When browsing different pages in a website, developers must add loading screens to the website; so that the website has enough time to traverse between web pages. Loading screens are an effective way for users to wait while a website page loads/initializes.

How to create a loading screen?

To create a loading screen, we can use HTML and CSS. First, we will create a div element in which we will give a title tag that will display the percentage.

We will then use CSS properties (such as border-radius) to specify height and width and add animation to the loading element. We will also use the over-flow attribute to hide the element so that we can only see the main content.

grammar

The following is the syntax of the overflow attribute -

p {
   overflow: hidden/ visible/ scroll/ auto;
}

Copy after login

In the above syntax, you can see that the values used with the overflow attribute can be the hidden value to hide the element, the visible value to make the element visible, and the scroll attribute to add a slider when the element is hidden.

Let's look at an example to better understand loading screens.

Example

In the code given below, we have declared the title tag and declared a div container, created our loading container in it and then filled it with color and added animation. After that, we added a second title in the container to show the percentage and added a keyframe function to rotate 360 degrees. Let's take a look at the output of the code.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Advanced Loading Screen</title>
   <style>
      body {
         background-color: #111;
      }
      h2 {
         color: white;
         text-align: center;
         margin: 20px 0;
         font-size: 70px;
      }
      .screen {
         height: 250px;
         margin: auto;
         border-radius: 50%;
         position: relative;
         width: 250px;
         top: 20%;
         border: 4px solid #DDD;
         overflow: hidden;
      }
      @keyframes rotate {
         to {
            transform: rotate(358deg);
         }
      }
      .screen::after {
         content: "";
         position: absolute;
         top: 25%;
         left: -50%;
         height: 300%;
         width: 200%;
         nimation: rotate 10s linear forwards infinite;
         background-color: blue;
         border-radius: 50%;
         box-shadow: 0 3 10px #4CAF50;
         opacity: 0.9;
      }
      h3 {
         color: white;
         font-size: 70px;
         text-align: center;
         position: relative;
         top: 14%;
      }
   </style>
</head>
<body>
   <h2>Loading Screen</h2>
   <div class="screen">
      <h3>50%</h3>
   </div>
</body>
</html>

Copy after login

You can see in the output above that we declare the title tag first, then the container where we add a color that displays our second title, and then the animation within the container. The animation rotates 360 degrees above the percentage title.

Example

Here is another example for creating an advanced loading screen. In the example below, we declare a div element and then give it a class to style the element using CSS properties. We added black and red colors to the border, added an animation to it, and used the keyframes function to rotate the container 360 degrees. The above code demonstrates how to add a loading screen to our web page.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of the advanced loading screen</title>
   <style>
      @keyframes spin {
         100% {
             transform: rotate(359deg);
         }
         0% {
            transform: rotate(0deg);
         }
      }
      .load {
        border-bottom: 14px solid black;
        border-right: 14px solid red;
        border-left: 14px solid red;
        border-top: 14px solid black;
        border-radius: 49%;
        width: 120px;
        animation: spin 3s linear infinite;
        height: 120px;
      }
      @keyframes spin {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
<body>
   <div class="load"></div>
</body>
</html>

Copy after login

In the output, you can see the two colors rotated 360 degrees, giving the user the impression that the page is loading. You can use the align attribute to align the loader to the center of the page.

Note - The keyframe attribute is a property of CSS that enables developers to animate HTML elements without using JavaScript, and these keyframes specify the style that the element will have.

Keyframe properties specify the amount of time the animation must run, and the transitions used should be smooth and accurate. Percentage should be specified, and the developer must ensure that the animation is compatible with all browsers.

in conclusion

Web developers use different types of styles and animations to create loading screens depending on the project they are working on. Making the loading screen a little different and putting a creative effort into it is crucial because users are often distracted by the look of the loading screen and the time it takes to load the page. The main purpose of these loading screens is to make the website interactive and not bore the users when the page takes a lot of time to load/launch.

The above is the detailed content of Create advanced loading screens using CSS. For more information, please follow other related articles on the PHP Chinese website!