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.

1. Realize Loading Effect Of Surround Reflection Example.

  1. Create a Html file implement_loading_effect_of_surround_reflection.html.
  2. 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>

     

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

2. The Loading Effect Of Surround Reflection Demo Video.

implement loading effect of surroun...
implement loading effect of surround reflection
 

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Clicky