Ripple loader only using css for website preload

Creating animated effects with pure CSS for any project. just like the iOS pin icon associate degreed continues to animate an outward ripple impact.

GIFs and SVG loaders ar generally the foremost common alternative for internet. Value, Description. Keyframe name, Specifies the name of the Keyframe you wish to bind to the selector. None, Default worth.

associate degree awing assortment of — Pure CSS — Loaders and Spinners. Ball Scale Ripple Multiple awing. we have a tendency to collected some distinctive wanting CSS glow effects that may add as an example, the water ripple impact once the loader jumps.

Loaders css pleasant and performance-focused pure CSS loading animations. ball-scale-ripple-multiple. Ball-spin-fade-loader. Line-spin-fade-loader. 3D Rotating sq. Loading Animation Effects – Pure hypertext markup language CSS Loader Tutorial. By Online.

CSS Ripple Animation Effects. put together the active CSS category applied once the link is active. ripple. type. mathematician | object. Default. Undefined. Description. Applies the.

pleasant and performance-focused pure CSS loading animations. Ball Scale Ripple. Using. ball-scale-ripple category for Ball Scale Ripple Loader.

fully fledged developers solely would like one look into MDC.ripple. The JavaScript and CSS files we have a tendency to enclosed take off of a posh project.

webpack-dev- server@2 css-loader sass-loader node-sass extract-loader file-loader

HTML

<a href="#" class="intro-banner-vdo-play-btn pinkBg" target="_blank">
<i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
</a>

CSS

body{
  min-height:100vh;
  background-image: -webkit-gradient(linear,left bottom,left top,from(#a8edea),to(#fed6e3));
    background-image: -webkit-linear-gradient(bottom,#a8edea 0,#fed6e3 100%);
    background-image: -o-linear-gradient(bottom,#a8edea 0,#fed6e3 100%);
    background-image: linear-gradient(to top,#a8edea 0,#fed6e3 100%);
}
.pinkBg {
    background-color: #ed184f!important;
    background-image: linear-gradient(90deg, #fd5581, #fd8b55);
}
.intro-banner-vdo-play-btn{
    height:60px;
    width:60px;
    position:absolute;
    top:50%;
    left:50%;
    text-align:center;
    margin:-30px 0 0 -30px;
    border-radius:100px;
    z-index:1
}
.intro-banner-vdo-play-btn i{
    line-height:56px;
    font-size:30px
}
.intro-banner-vdo-play-btn .ripple{
    position:absolute;
    width:160px;
    height:160px;
    z-index:-1;
    left:50%;
    top:50%;
    opacity:0;
    margin:-80px 0 0 -80px;
    border-radius:100px;
    -webkit-animation:ripple 1.8s infinite;
    animation:ripple 1.8s infinite
}

@-webkit-keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
.intro-banner-vdo-play-btn .ripple:nth-child(2){
    animation-delay:.3s;
    -webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3){
    animation-delay:.6s;
    -webkit-animation-delay:.6s
}

One comment

  1. Thank you for sharing your thoughts. I truly appreciate your efforts and I am waiting for your further post thank you once again.|

Leave a Reply