How To Use Html & CSS To Achieve Circle Loading And Reflection Effect Example ·

This article mainly introduces how to use html+css to realize the loading effect of surround reflection.

Table of Contents

1. Realize Loading Effect Of Surround Reflection Example.

Create a Html file implement_loading_effect_of_surround_reflection.html.

Then copy the below Html + CSS source code into the above html file.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Implement Loading Effect Of Surround Reflection With Html & CSS</title>

<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 

body{
    height: 100vh;
    display: flex; /* Use the flex layout. */
    justify-content: center; 
    align-items: center; /* Align child elements to the center. */
    background-color: rgb(0, 255, 0); /* define the web page background color to green. */
}

.container{
    position: relative;
    height: 150px;
    width: 250px;
    -webkit-box-reflect:below 1px linear-gradient(transparent  ,rgb(196, 17, 26)); /* -webkit-box-reflect：This property can realize the reflection effect. */
}


.circle{
    position: relative;
    margin: 0 auto; /* align center. */
    height: 150px;
    width: 150px;
    background-color: rgb(255, 0, 0); /* define the circle border color to red. */
    border-radius: 50%; /* radian of angle. */
    animation: rotate_animation 2s linear infinite; /* Animate it to rotate. */
}

@keyframes rotate_animation{
    0%{ 
          
        transform: rotate(0deg); /* Set the rotation angle. */
    }

    100%{
        
        transform: rotate(360deg); /* Set the rotation angle. */
    }
}

/* Define a double pseudo-class, a small circle with the same background color, covered on .circle. */
.circle::after{
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: rgb(0, 0, 255); /* define the circle background color to blue. */
    border-radius: 50%;
}

/* Define the blue ring effect, because it is covered by the small circle, so directly define a gradient blue circle to get the blue ring. */
.ring{
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    height: 150px;
    background-image: linear-gradient(180deg,rgb(256, 19, 19) ,transparent 80%); /* linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%); Gradient color, the color is blue at first, then transit to transparent color gradiently. */
    border-radius: 75px 0 0 75px;
}

/* Defines the glowing sphere on the ring. */
.ring::after{
    content: '';
    position: absolute;
    right: -5px;
    top: -2.5px;
    width: 15px;
    height: 15px;
    background-color: rgb(255, 255, 0); /* defin the ball color to yellow. */
    box-shadow: 0 0 5px rgb(40, 151, 202), /* define the box shadow. */
    0 0 10px rgb(40, 124, 202),
    0 0 20px rgb(40, 124, 202),
    0 0 30px rgb(40, 124, 202),
    0 0 40px rgb(40, 124, 202),
    0 0 50px rgb(40, 124, 202),
    0 0 60px rgb(40, 124, 202),
    0 0 60px rgb(40, 124, 202);
    border-radius: 50%;
    z-index: 1; /* display the ball on the top layer. */
}
   
/* Define the loading text css style. */  
.container>span{
    position: absolute;
    left: 58%;
    top: 50%;
    transform: translate(-50%,-50%); /* align in center. */
    color: rgb(20, 129, 202);
    text-shadow: 0 0 10px rgb(20, 129, 202), /* the text shadow. */
    0 0 30px rgb(20, 129, 202),
    0 0 60px rgb(20, 129, 202),
    0 0 100px rgb(20, 129, 202);
    font-size: 18px;
    z-index: 1;
}     
      
</style>

</head>
<body>

<!-- the div element that use the .container class is the bottommost box. -->
<div class="container">
    <!-- the span element's content is the text of the loading animation.  -->
    <span>Loading example...</span>
    <!-- the div that use the .circle class is the underlying circular box. -->
    <div class="circle">
        <!-- the div that use the .ring css class is that blue ring. -->
        <div class="ring"></div>
    </div>
</div>

</body>
</html>

Open the above Html file in a web browser, then you can see the loading effect of surround reflection.

How To Use Html & CSS To Achieve Circle Loading And Reflection Effect Example

1. Realize Loading Effect Of Surround Reflection Example.

2. The Loading Effect Of Surround Reflection Demo Video.

Leave a Comment Cancel Reply