Community Learn Tools Library Leisure

English

Home > Web Front-end > CSS Tutorial > Use css to achieve loading animation effects

Use css to achieve loading animation effects

PHPz

Release： 2017-04-02 10:32:28

Original

2326 people have browsed it

css implementation loadinganimationThe effect is as follows:

Use css to achieve loading animation effects

html

<div class="ui-loading-wrap">
     <p>加载中</p>
      <i class="ui-loading"></i>
</div>

Copy after login

css

.ui-loading-wrap {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    text-align: center;
    height: 40px;
.ui-loading {
    width: 20px;
    height: 20px;
    display: block;
    background: url(../img/loading_sprite.png);
    -webkit-background-size: auto 20px;
    -webkit-animation: am-rotate 1s steps(12) infinite; 
      
@-webkit-keyframes am-rotate {
    from {
        background-position: 0 0
    }
 
    to {
        background-position: -240px 0
    }
}

Copy after login

The map's address:

Use css to achieve loading animation effects

The above is the detailed content of Use css to achieve loading animation effects. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css

source：php.cn

Previous article：Use css3 to truncate text and add ellipses Next article：How to use css to remove the default style assigned by the browser to a form

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn