Skip to content
Trending Topics: javascript•javascript lessons•JavaScript mixed•html and css•css mixed

CSS Loading Animation 1

Leave a Comment

HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
</head>
<body>

    <div class="loader"><span>Loading</span></div>
    
</body>
</html>

CSS CODE:

body{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: sans-serif;
  background:#000000
}
.loader{
  position: relative;
  font-size: 2em;
  background-color:#000000;
  color: #000;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .5em;
  padding: 10px;
}
.loader span{
  color: #fff;
  mix-blend-mode: difference;
}
.loader:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 100%;
  background-color: #fff;
  animation: ani 2s linear infinite;
}
@keyframes ani{
  0%{
    left: 0;
  }
  50%{
    left: calc(100% - 80px);
  }
  100%{
    left: 0;
  }
}

Published by Truecodes

Instagram: codeblogger website: truecodes.org

css button, css mixed, html and css
, , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Google photo

You are commenting using your Google account. ( Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: