0

Bootstrap 4 website preloader with ripple/wave effect

<div class="container">
    <div class="row">
        <div class="container">
            <div class="row"> <a href="#" class="intro-banner-vdo-play-btn blueBg" target="_blank">
                    <i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
                    <span class="ripple blueBg"></span>
                    <span class="ripple blueBg"></span>
                    <span class="ripple blueBg"></span>
                    <span class="ripple blueBg"></span>
                </a> </div>
        </div>
    </div>
</div>
body {
    background: #000
}

.blueBg {
    background-image: linear-gradient(90deg, #00BFFF, #1E90FF)
}

.intro-banner-vdo-play-btn {
    height: 60px;
    width: 60px;
    position: absolute;
    top: 40%;
    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.9s 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
}

.intro-banner-vdo-play-btn .ripple:nth-child(4) {
    animation-delay: .6s;
    -webkit-animation-delay: .6s
}
RUN
add comment
Suggest a different solution or add another example