Here are my Trendy CSS logo loader and curtain effect tut

Samuelonoja — Mon, 30 Dec 2019 22:40:27 +0000

Hello there...

This is the primary blog entry I'm making on my new blog and I will be offering to you my wonderful codes so remember to bookmark me!.

I'm sharing the source code for my trendy logo loader I utilized on Voxsugar. Visit the link to see the demo.

There's not a lot to do other than adding some CSS snippets in for your CSS document and blast you are finished!

Above all else include this snippet for the logo loader in your CSS document.

body {
  font-family: "Texta", "AvenirNext-Regular", "Helvetica Neue", Helvetica, Arial,
   sans-serif;
  font-size: 18px;
  line-height: 30px;
  background-color: #fff;
  color: #2f3846;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body:before {
  content: "";
  width: 140px;
  left: 45%;
  position: fixed;
  top: 50%;
  height: 80px;
  background-image: url(/your-logo.png);
  background-repeat: no-repeat;
  background-size: inherit;
  animation: logoloader 1s ease-in-out forwards;
}

@keyframes logoloader {
  0% {
    visibility: visible;
  }

  100% {
    visibility: hidden;
  }
}

*Don't forget to replace the image url with your logo

Lastly for the page transition add this to your CSS document again


body:after {
  content: "";
  width: 100%;
  background-color: rgb(248, 36, 177);
  height: 100vh;
  position: fixed;
  transform: translateX(-100%);
  left: 0;
  top: 0;
  z-index: 99;
  animation: pagetransition 1.6s ease-in-out forwards;
}

main {
  visibility: hidden;
  animation: contentshow 0s ease-in-out forwards 0.8s;
}

@keyframes pagetransition {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes contentshow {
  0% {
    visibility: hidden;
  }

  100% {
    visibility: visible;
  }
}

Done..you have just added logo loader and curtain effect on your site.

Original article https://samio.dev/css-logo-loader-and-curtain-effect/

DEV Community: Samuelonoja

Here are my Trendy CSS logo loader and curtain effect tut