UI Design

Sci Fi style Loader
Online Try it

loaders Sci-Fi Projects

<!DOCTYPE html>
<html>
<head>
<title>Sci-Fi Loader – Fiuce.com</title>
  <style>
    body {
	padding: 0;
	background: #000111;
        text-align: center;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width:97%;	
        color: #fff;
        }

ul{
      margin: auto;
      padding: 0;
        }
	.loader li {
	background: #fff;
	margin-left: 1px;
	width: 17px;
	height: 30px;
	display: inline-block;
        opacity: 0;
	border-radius: 2px;
	box-shadow: 0px 0px 5px #fff;
	transform: skew(-25deg, 0deg) scale(0.1);
	animation: loader .8s ease-in-out infinite alternate;
	}

@keyframes loader {
	  to {
	    transform: skew(-25deg, 0deg) scale(1);
      opacity: 1;
    }
  }

.loader li:nth-child(2){
	  animation-delay:0.2s;
	}
	.loader li:nth-child(3){
	  animation-delay:0.4s;
	}
	.loader li:nth-child(4){
	  animation-delay:0.6s;
	}
	.loader li:nth-child(5){
	  animation-delay:0.8s;
	}
	.loader li:nth-child(6){
	  animation-delay: 1s;
	}
	.loader li:nth-child(7){
	  animation-delay: 1.2s;
	}
  </style>
</head>
<body>

<body>
		<ul class="loader">
			<li></li>
			<li></li>
			<li></li>
		</ul>
      <p>loading, please wait …</p>
	</body>
</body>
</html>

Result:

UI Design or user interface engineering is the design of user interfaces for machines and software, such as computers, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience.