This article brings you the content is about how to use CSS to monitor the network connection status of the page, there is a certain reference value, the need for a friend can refer to, I hope you have some help.
Effect Preview
Source code Download
Https://github.com/comehope/front-end-daily-challenges
Code interpretation
Defines the DOM, which contains 2 elements, representing the top and bottom halves of the hourglass, respectively:
<div class= "Loader" > <span class= "Top" ></span> <span class= "Bottom" ></span> </div>
Center display:
body { margin:0; HEIGHT:100VH; Display:flex; Align-items:center; Justify-content:center; Background-color:gainsboro;}
Define the container dimensions and set the overall layout of the child elements:
. loader { width:4.3em; Height:9.8em; font-size:10px; position:relative; Display:flex; Flex-direction:column; Align-items:center; Justify-content:space-between;}
Draw a square of 2 squares:
. top,.bottom { width:3.5em; height:3.5em; Border-style:solid; Border-color:saddlebrown;}
Turn 2 squares into hourglass shapes with borders, fillets, and rotations:
. top,.bottom { border-width:0.2em 0.2em 0.6em 0.6em; border-radius:50% 100% 50% 30%;}. Top { transform:rotate ( -45deg);}. Bottom { transform:rotate (135deg);}
The sand is painted with pseudo-elements, the top of the upper sand is a large arc, and the lower part of the sand is a small arc:
. top::before,.bottom::before { content: '; Position:absolute; Width:inherit; Height:inherit; Background-color:deepskyblue;}. Top::before { border-radius:0 100% 0 0;}. Bottom::before { border-radius:0 0 0 35%;}
Define animation properties for sand:
. top::before,.bottom::before { animation:2s linear infinite;}
Increase the animation effect of sand falling from the top half of the hourglass:
. top::before { Animation-name:drop-sand;} @keyframes Drop-sand { to { transform:translate ( -2.5em, 2.5em); }}
An animated effect that increases the sand's hourglass in the lower half:
. bottom::before { transform:translate (2.5em, -2.5em); Animation-name:fill-sand;} @keyframes Fill-sand { to { transform:translate (0, 0);} }
Hide the upper half of the hourglass and the lower part of the container, at which point the top 2 animations overlay The sand from the top half and slowly accumulate in the lower half:
. top,.bottom { Overflow:hidden;}
Create a narrow strip with the pseudo elements of the outer container to simulate the flowing sand:
. loader::after { content: '; Position:absolute; Width:0.2em; Height:4.8em; Background-color:deepskyblue; Top:1em;}
Animated effect of increasing sand flow:
. loader::after { animation:flow 2s linear infinite;} @keyframes Flow { 10%, 100% { transform:translatey (3.2EM); }}
Finally, increase the rollover animation for the Hourglass:
. loader { animation:rotating 2s linear infinite;} @keyframes Rotating { 0, 90% { transform:rotate (0); } 100% { transform:rotate (0.5turn); }}
Done!