Custom CSS Wave Loader Very Easy to implement

I’ve been look individuals doing voluminous cool preloader stuff with CSS wave loader these days. i made a decision to present it a go and came up with a css wave animation loader (kind-of) result. It’s one those effects that I accustomed learn in my time period in net world with JavaScript. however United Nations agency is aware of I’ll be making this in CSS wave loader while not hoping on JS in the slightest degree. Let Maine show you a fast preview of the preloader animation:

HTML

<div class="wrapper">
  <div class="wave"></div>
</div>

CSS

body{
  padding:0px;
  margin:0px;
  color:#fff;
}
.wrapper{
  width:100%;
  display:flex;
  background:#ff5722;
  min-height:100vh;
  align-items: center;
}
.wave {
  display: inline-block;
  position: absolute;
  width: 70px;
  height: 70px;
  left:50%; 
  top:50%; 
  transform: translate(-50%, - 50%)
}
.wave:before, .wave:after {
  position: absolute;
  content: '';
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  left:50%; 
  top:50%; 
  transform: translate(-50%, - 50%);
  animation: wave 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.wave:after {
  animation-delay: -0.4s;
}
@keyframes wave {
  0% {    
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

4 Comments

  1. […] you search another CSS loader than you check this Custom CSS Wave Loader this is also very easy to implement on your […]

  2. memory hackers - pc rules of survival hack 8.4.2018
    memory hackers - pc rules of survival hack 8.4.2018

    Heya are using WordPress for your blog platform?
    I’m new to the blog world but I’m trying to get started
    and create my own. Do you need any html coding knowledge to make your own blog?
    Any help would be greatly appreciated!

  3. mobile legends hack for ios
    mobile legends hack for ios

    Hello! Do you know if they make any plugins to
    safeguard against hackers? I’m kinda paranoid about losing everything I’ve worked hard on.
    Any suggestions?

  4. mobile legends hack diamond fun
    mobile legends hack diamond fun

    I do not even know the way I stopped up right here, however I believed this publish was great.

    I do not recognise who you might be but definitely you are going to a well-known blogger in the
    event you are not already. Cheers!

Leave a Reply