SCSS Loader effect

Front-end development whqet,csdn, Wang Haiqing, Whqet, front-end development experts

A few days to see a group using SCSS implementation of the loader effect (loading effect), encourage you to do it yourself, of course, you can also go to codepen online research, the effect is as follows.

Before you make this case, you need to prepare these.

1. Master the use of scss, of course, can not, using SCSS will be more efficient.

2. Master the Box-shadow, border, and Border-radius using CSS3 to achieve the drawing.

3. Master the animation method of CSS3.

4. Some patience, some ideas (ideas can make you better)

5. Learn to parse cases, first look at the static diagram.

OK, so let's take a step-by-step implementation.

The HTML section below, we put all the loader into a container, and then give each loader two classes, one class loader as a unified set, another class for personalization.

<div id= ' loaders ' >  <div class= ' loader ball ' ></div>  <div class= ' loader spin ' ></ div>  <div class= ' loader single ' ></div>  <div class= ' loader double ' ></div>  <div class= ' loader triple ' ></div>  <div class= ' loader dots ' ></div></div>

The next step is CSS, where we use SCSS to simplify the writing of CSS.

/* CSS Reset, use Cssreset here, space limit is no longer listed, in addition to use prefix-free so can not consider browser prefix * */*, *:before, *:after {box-sizing:border-box;} /* * * * * * * * * * * * * * * * * * * * * * * * * Loader: HSL (Random (), 75%,50%), $speed: 500ms;/* * Overall settings * Web background color, loaders Center display * Loader width, height, fillet, animation * * /body {background: #111;}  #loaders {position:fixed; top:0; left:0; right:0;  bottom:0; WIDTH:100VW;  height:50px;  Margin:auto;  Display:flex;  Flex-flow:row nowrap;  Justify-content:space-around;    . loader {position:relative; width:50px;    height:50px;    border-radius:100%;    Border-style:solid; Animation:loader $speed linear Infinite; /* * Rotate the eye design, using Box-shadow's Inset method * */&.ball {box-shadow:inset 5px 5px 0 10px $color;}/* * Design of the loop, Box-shadow mate B      Order-width * */&.spin {border-width:1px 1px 2px;      Border-color: $color;    box-shadow:0 1px $color;      }/* * Single-line design, border-width, border transparent * */&.single {border-width:1px;    Border-color: $color Transparent transparent; } /* Double line design, border-width, border transparent * */&.double {border-width:1px;    Border-color: $color Transparent;      }/* * Three-wire design, border-width, border transparent * * */&.triple {border-width:1px;      Border-color: $color;    Border-top-color:transparent;      }/* * Ring point Design, Box-shadow and before, after pseudo object * */&.dots {animation-timing-function:steps (8);        &:before, &:after {content: ';        Position:absolute; width:10px;        height:10px;        Margin:auto;        border-radius:100%;      Background: $color;        } &:before {top:0; left:0; right:0;      box-shadow:20px 20px Rgba ($color,. 8), 14px 6px Rgba ($color,. 9), 14px 34px Rgba ($color,. 7);        } &:after {left:0; right:0; bottom:0;        Background:rgba ($color,. 6);      Box-shadow: -20px-20px Rgba ($color,. 4), -14px-6px Rgba ($color,. 5), -14px-34px Rgba ($color,. 3); }}}}/* * Rotate animation */@keyframes Loader {to {transform:rotate (360deg);}}} 

----------------------------------------------------------

Front-end development Whqet, focus on web front-end development, share related resources, welcome to praise, welcome to shoot bricks.
---------------------------------------------------------------------------------------------------------

SCSS Loader effect