CSS3 achieves 10 kinds of loading effects

Last night with CSS3 to achieve a few common loading effect, although very simple, but still share, by the way also when is to do notes ...

1th Effect:

The code is as follows:

<div class= "Loading" >        <span></span>        <span></span>        <span></ span>        <span></span>        <span></span></div>

. loading{width:80px;            height:40px;            margin:0 Auto;        margin-top:100px;            }. Loading span{display:inline-block;            width:8px;            height:100%;            border-radius:4px;            Background:lightgreen;        -webkit-animation:load 1s ease infinite;                } @-webkit-keyframes load{0%,100%{height:40px;            Background:lightgreen;                } 50%{height:70px;                margin: -15px 0;            Background:lightblue;        }}. Loading Span:nth-child (2) {-webkit-animation-delay:0.2s;        }. Loading Span:nth-child (3) {-webkit-animation-delay:0.4s;        }. Loading Span:nth-child (4) {-webkit-animation-delay:0.6s;        }. Loading Span:nth-child (5) {-webkit-animation-delay:0.8s; }

2nd effect:

The code is as follows:

<div class= "Loading" >        <span></span></div>

. loading{width:150px;            height:4px;            border-radius:2px;            margin:0 Auto;            margin-top:100px;            position:relative;            Background:lightgreen;        -webkit-animation:changebgcolor 1.04s ease-in Infinite Alternate;            }. Loading span{display:inline-block;            width:16px;            height:16px;            border-radius:50%;            Background:lightgreen;            Position:absolute;            Margin-top: -7px;            margin-left:-8px;        -webkit-animation:changeposition 1.04s ease-in Infinite Alternate;            } @-webkit-keyframes changebgcolor{0%{background:lightgreen;            } 100%{Background:lightblue;            }} @-webkit-keyframes changeposition{0%{background:lightgreen;        } 100%{margin-left:142px;        Background:lightblue; }        }

第3-5 Effects:

The code is as follows:

<div class= "Loading" >        <span></span>        <span></span>        <span></ span>        <span></span>        <span></span></div>

The CSS styles for 第3-5 effects are:

. loading{width:150px;            height:15px;            margin:0 Auto;        margin-top:100px;            }. Loading span{display:inline-block;            width:15px;            height:100%;            margin-right:5px;            border-radius:50%;            Background:lightgreen;        -webkit-animation:load 1.04s ease Infinite;         }. Loading span:last-child{margin-right:0px;            } @-webkit-keyframes load{0%{opacity:1;            } 100%{opacity:0;        }}. Loading Span:nth-child (1) {-webkit-animation-delay:0.13s;        }. Loading Span:nth-child (2) {-webkit-animation-delay:0.26s;        }. Loading Span:nth-child (3) {-webkit-animation-delay:0.39s;        }. Loading Span:nth-child (4) {-webkit-animation-delay:0.52s;     }. Loading Span:nth-child (5) {       -webkit-animation-delay:0.65s; }

. loading{width:150px;            height:15px;            margin:0 Auto;        margin-top:100px;            }. Loading span{display:inline-block;            width:15px;            height:100%;            margin-right:5px;            border-radius:50%;            Background:lightgreen;        -webkit-animation:load 1.04s ease Infinite;         }. Loading span:last-child{margin-right:0px;                } @-webkit-keyframes load{0%{opacity:1;            -webkit-transform:scale (1.3);                } 100%{opacity:0.2;            -webkit-transform:scale (. 3);        }}. Loading Span:nth-child (1) {-webkit-animation-delay:0.13s;        }. Loading Span:nth-child (2) {-webkit-animation-delay:0.26s;        }. Loading Span:nth-child (3) {-webkit-animation-delay:0.39s; }. Loading Span:nth-child (4) {-webkit-animation-delay:0.52s;        }. Loading Span:nth-child (5) {-webkit-animation-delay:0.65s; }

. loading{width:150px;            height:15px;            margin:0 Auto;            position:relative;        margin-top:100px;            }. Loading span{position:absolute;            width:15px;            height:100%;            border-radius:50%;            Background:lightgreen;        -webkit-animation:load 1.04s ease-in Infinite Alternate;                } @-webkit-keyframes load{0%{opacity:1;            -webkit-transform:translate (0px);                } 100%{opacity:0.2;            -webkit-transform:translate (150px);        }}. Loading Span:nth-child (1) {-webkit-animation-delay:0.13s;        }. Loading Span:nth-child (2) {-webkit-animation-delay:0.26s;        }. Loading Span:nth-child (3) {-webkit-animation-delay:0.39s;       }. Loading Span:nth-child (4) {-webkit-animation-delay:0.52s; }. Loading Span:nth-child (5) {-webkit-animation-delay:0.65s; }

第6-8 Effects:

The code is as follows:

<div class= "Loading" >        <span></span>        <span></span>        <span></ span>        <span></span>        <span></span></div>

The CSS styles for 第6-8 effects are:

. loading{width:150px;            height:15px;            margin:0 Auto;            margin-top:100px;        Text-align:center;            }. Loading span{display:inline-block;            width:15px;            height:100%;            margin-right:5px;            Background:lightgreen;        -webkit-animation:load 1.04s ease Infinite;         }. Loading span:last-child{margin-right:0px;            } @-webkit-keyframes load{0%{opacity:1;            } 100%{opacity:0;        }}. Loading Span:nth-child (1) {-webkit-animation-delay:0.13s;        }. Loading Span:nth-child (2) {-webkit-animation-delay:0.26s;        }. Loading Span:nth-child (3) {-webkit-animation-delay:0.39s;        }. Loading Span:nth-child (4) {-webkit-animation-delay:0.52s;     }. Loading Span:nth-child (5) {       -webkit-animation-delay:0.65s; }

. loading{width:150px;            height:15px;            margin:0 Auto;        margin-top:100px;            }. Loading span{display:inline-block;            width:15px;            height:100%;            margin-right:5px;            Background:lightgreen;            -webkit-transform-origin:right Bottom;        -webkit-animation:load 1s ease infinite;         }. Loading span:last-child{margin-right:0px;            } @-webkit-keyframes load{0%{opacity:1;                } 100%{opacity:0;            -webkit-transform:rotate (90DEG);        }}. Loading Span:nth-child (1) {-webkit-animation-delay:0.13s;        }. Loading Span:nth-child (2) {-webkit-animation-delay:0.26s;        }. Loading Span:nth-child (3) {-webkit-animation-delay:0.39s; }. Loading Span:nth-child (4) {-webkit-animation-delay:0.52s;        }. Loading Span:nth-child (5) {-webkit-animation-delay:0.65s; }

. loading{width:150px;            height:15px;            margin:0 Auto;        margin-top:100px;            }. Loading span{display:inline-block;            width:15px;            height:100%;            margin-right:5px;            Background:lightgreen;            -webkit-transform-origin:right Bottom;        -webkit-animation:load 1s ease infinite;         }. Loading span:last-child{margin-right:0px;                } @-webkit-keyframes load{0%{opacity:1;            -webkit-transform:scale (1);                } 100%{opacity:0;            -webkit-transform:rotate (90deg) scale (. 3);        }}. Loading Span:nth-child (1) {-webkit-animation-delay:0.13s;        }. Loading Span:nth-child (2) {-webkit-animation-delay:0.26s;        }. Loading Span:nth-child (3) {-webkit-animation-delay:0.39s;      }  . Loading Span:nth-child (4) {-webkit-animation-delay:0.52s;        }. Loading Span:nth-child (5) {-webkit-animation-delay:0.65s; }

第9-10 Effects:

The code is as follows:

<div class= "Loadeffect" >        <span></span>        <span></span>        <span>< /SPAN>        <span></span>        <span></span>        <span></span>        < Span></span>        <span></span></div>

CSS styles are:

. loadeffect{width:100px;            height:100px;            position:relative;            margin:0 Auto;        margin-top:100px;            }. loadeffect span{display:inline-block;            width:16px;            height:16px;            border-radius:50%;            Background:lightgreen;            Position:absolute;        -webkit-animation:load 1.04s ease Infinite;            } @-webkit-keyframes load{0%{opacity:1;            } 100%{opacity:0.2;            }}. Loadeffect Span:nth-child (1) {left:0;            top:50%;            margin-top:-8px;        -webkit-animation-delay:0.13s;            }. Loadeffect Span:nth-child (2) {left:14px;            top:14px;        -webkit-animation-delay:0.26s;            }. Loadeffect Span:nth-child (3) {left:50%;            top:0;            Margin-left: -8px; -webkit-animation-delay:0.39s;            }. Loadeffect Span:nth-child (4) {top:14px;            right:14px;        -webkit-animation-delay:0.52s;            }. Loadeffect Span:nth-child (5) {right:0;            top:50%;            margin-top:-8px;        -webkit-animation-delay:0.65s;            }. Loadeffect Span:nth-child (6) {right:14px;            bottom:14px;        -webkit-animation-delay:0.78s;            }. Loadeffect Span:nth-child (7) {bottom:0;            left:50%;            Margin-left: -8px;        -webkit-animation-delay:0.91s;            }. Loadeffect Span:nth-child (8) {bottom:14px;            left:14px;        -webkit-animation-delay:1.04s; }

. loadeffect{width:100px;            height:100px;            position:relative;            margin:0 Auto;        margin-top:100px;            }. loadeffect span{display:inline-block;            width:20px;            height:20px;            border-radius:50%;            Background:lightgreen;            Position:absolute;        -webkit-animation:load 1.04s ease Infinite;                } @-webkit-keyframes load{0%{-webkit-transform:scale (1.2);            Opacity:1;                } 100%{-webkit-transform:scale (. 3);            opacity:0.5;            }}. Loadeffect Span:nth-child (1) {left:0;            top:50%;            margin-top:-10px;        -webkit-animation-delay:0.13s;            }. Loadeffect Span:nth-child (2) {left:14px;            top:14px;        -webkit-animation-delay:0.26s; }. Loadeffect Span:nth-chiLD (3) {left:50%;            top:0;            Margin-left: -10px;        -webkit-animation-delay:0.39s;            }. Loadeffect Span:nth-child (4) {top:14px;            right:14px;        -webkit-animation-delay:0.52s;            }. Loadeffect Span:nth-child (5) {right:0;            top:50%;            margin-top:-10px;        -webkit-animation-delay:0.65s;            }. Loadeffect Span:nth-child (6) {right:14px;            bottom:14px;        -webkit-animation-delay:0.78s;            }. Loadeffect Span:nth-child (7) {bottom:0;            left:50%;            Margin-left: -10px;        -webkit-animation-delay:0.91s;            }. Loadeffect Span:nth-child (8) {bottom:14px;            left:14px;        -webkit-animation-delay:1.04s; }

PS:CSS style code In fact a lot of repetition, mainly is the animation is not the same, but in order to facilitate the use of directly in the future, the first not to tidy up

CSS3 achieves 10 kinds of loading effects (RPM)