SCSS loader effect, scssloadereffect

SCSS loader effect, scssloadereffect
Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert

In a few days, let's look at a group of loader effect implemented by SCSS and encourage everyone to do it by themselves. Of course, you can also go to CodePen for online research. The effect is as follows.

Prepare these before creating this case.

1. Master the use of scss. Of course, you can use scss more efficiently.

2. Grasp the use of box-shadow, border, and border-radius in css3.

3. Master CSS 3 animation methods.

4. patience and creativity (creativity can make you better)

5. Learn to parse the case and first look at the static graph.

Let's get down to the truth and implement it step by step.

The html section is as follows. Here we put all the loaders in one container, and then we set the loader class for each loader class, and the other class for personalized settings.

<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. Here we use scss to simplify css writing.

/** CSS reset. CSS reset is used here, and the space limit is not listed. In addition, prefix-free is used, so the browser prefix **/*, *: before ,*: after {box-sizing: border-box;}/** loader color random color **/$ color: hsl (random (360), 75%, 50%); $ speed: 500 ms;/** overall settings * webpage background color and loaders center display * loader width, height, rounded corner, 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; /** Design of rotating eyes, using the inset method of box-shadow **/&. ball {box-shadow: inset 5px 5px 0 10px $ color;}/** rotation ring design. box-shadow works with border-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;}/** dual line design, border-width, border transparent **/&. double {border-width: 1px; border-color: $ color transparent;}/** three-line design, border-width, border transparent **/&. triple {border-width: 1px; border-color: $ color; border-top-color: transparent;}/** ring point design, box-shadow, before, and after pseudo objects **/&. 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); }}}/** rotation animation **/@ keyframes loader {to {transform: rotate (360deg );}}}

------------- Not fun, add another --------------------

<div id='loaders'>  <div class='loader doubleCircle'></div></div>

$colorr: hsl(180+random(180),85%,50%);@keyframes loaderr { from { transform: rotate(1800deg); } }&.doubleCircle {        border-width:2px;        border-color:$color transparent;        &:before {          content:"";          position: absolute;          width:56px;          height:56px;          top:-5px;          left:-5px;          border-radius:100%;          border-style:solid;          border-width:3px;          border-color:transparent $colorr;          animation: loaderr $speed*3 linear infinite;      }    }

Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------

Delayed loading of jquery mobile lazyloader

Jquery mobile does not conflict with lazyloader.
<Ul data-role = "listview">
<Li data-icon = "delete"> <a href = "#" data-rel = "close"> Close menu </a> </li>
<Li> <a href = "# panel-fixed-page2">
Accordion </a> </li>
<Li> <a href = "# panel-fixed-page2">
bbbbbbb </a> </li>

</Ul>
Then use the lazyload Method
$ Function (){
$ ("Img. list-view-img"). lazyload ({
Placeholder: "../img/sit/nullpic.gif ",
Effect: "fadeIn"
});
})