» »

GMAIL Loading Animation Using HTML and CSS, No Javascript

 


Hi, I will provide a free code for all of you on my YouTube channel, in learning GMAIL Loading Animation Using HTML and CSS, Without Javascript (Free Source Code). The learning is very easy, simple and easy to understand for beginners, good luck, good luck, my advice is don't forget to keep learning and repeat until you can, happy coding. have a nice day friend.

1. Code HTML : 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="loading-thumb">
      <div class="animation">
        <img src="logo.png" alt="" class="logo">
        <div class="loading-bar"></div>
        <p>Google Workspace</p>
      </div>
    </div>
  </body>
</html>

2. Code CSS :

@import url('https://fonts.googleapis.com/css2?family=Raleway:
wght@600&family=Roboto:wght@400;500&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

.loading-thumb{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.logo{
  width: 30%;
}

.loading-bar{
  width: 50%;
  height: 2.5px;
  background: #cfcfcf;
  margin: 30px auto 10px;
  position: relative;
  overflow: hidden;
}
p {
  font-size: 35px;
  font-weight: 500;
  color: #2f333b;
}
.loading-bar::before{
  content: "";
  width: 245px;
  height: 3px;
  background: #0073b1;
  position: absolute;
  left: -100%;
  animation: bluebar 1.5s infinite ease;
}
@keyframes bluebar {
  70%{
    left: 96px;
  }
  30%{
    left: -16px;
  }
}

For more details, you can see the link below :



https://www.youtube.com/watch?v=1cToNjavhK4

Don't forget to support my channel. Comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. ðŸ˜€

Download Free Code ZIP :  DOWNLOAD NOW



Postingan terkait:

— — Add Comment — ,

Belum ada tanggapan untuk "GMAIL Loading Animation Using HTML and CSS, No Javascript"

Post a Comment

Subscribe to: Post Comments (Atom)