Gradient Loader HTML CSS

Interesting loading page design in html css

Gradient Loader HTML CSS
Gradient Loader HTML CSS

A simple loading page example with a beautiful design. HTML CSS

 

<!DOCTYPE html>
<html>
<head>
    <title>Neumorphism Gradient Loader</title>
<style>
    * {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #240229;
}

.loader {
  position: relative;
  width: 200px;
  height: 200px;
  border: 4px solid #240229;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1), 10px 10px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 5px rgba(255, 255, 255, 0.2), inset 10px 10px 10px rgba(0, 0, 0, 0.4);
}

.loader:before {
  content: "";
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  bottom: 25px;
  z-index: 10;
  background: #240229;
  border-radius: 50%;
  border: 2px solid #240229;
  box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.loader span {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: linear-gradient(-225deg, #ff057c 0%, #8d0b93 50%, #321575 100%);
  filter: blur(20px);
  z-index: -1;
  animation: animate 0.5s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>    
</head>
<body>
   
    
    <div class="loader">
        <span></span>
    </div>

</body>
</html>

 



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.