Win8 loading

Developer
TabSpace
Size
1,988 Kb
Views
18,216
  1. Win8 loading Previews
  2. Win8 loading HTML Codes
  3. Win8 loading CSS Codes

How do I make an win8 loading?

Pure css loading. What is a win8 loading? How do you make a win8 loading? This script and codes were developed by TabSpace on 22 November 2022, Tuesday.

Win8 loading Previews
IQ Test

Win8 loading - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>win8 loading</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta charset="utf-8">
<title>CSS3-loading-ring</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="cover" class="cover">	<div id="loading" class="ui-circle-loading">	<ul class="animate">	<li></li>	<li></li>	<li></li>	<li></li>	<li></li>	<li></li>	<li></li>	</ul>	</div>	</div>
</body>
</html>

Win8 loading - Script Codes CSS Codes

body{	margin:0;	padding:0;	background:#222;
}
.cover{	width:100%;	height:100%;	position:absolute;	background-color:#333;	overflow:hidden;
}
.ui-circle-loading{	position:absolute;	top:50%;	left:50%;	margin-left:-30px;	margin-top:-30px;
}
.ui-circle-loading .animate{	width:60px;	height:60px;	margin:0;	padding:0;
}
.ui-circle-loading .animate li{	list-style:none;	padding:0;	width:5px;	height:5px;	position:absolute;	border-radius:50%;	margin:auto;	top:0;	left:0;	right:0;	bottom:0;	-webkit-animation-name:loading-item;	-webkit-animation-duration:6s;	-webkit-animation-iteration-count:infinite;
}
.ui-circle-loading .animate li:nth-child(0){	-webkit-animation-delay:0s;
}
.ui-circle-loading .animate li:nth-child(1){	-webkit-animation-delay:0.1s;
}
.ui-circle-loading .animate li:nth-child(2){	-webkit-animation-delay:0.2s;
}
.ui-circle-loading .animate li:nth-child(3){	-webkit-animation-delay:0.3s;
}
.ui-circle-loading .animate li:nth-child(4){	-webkit-animation-delay:0.4s;
}
.ui-circle-loading .animate li:nth-child(5){	-webkit-animation-delay:0.5s;
}
.ui-circle-loading .animate li:nth-child(6){	-webkit-animation-delay:0.6s;
}
@-webkit-keyframes loading-item {	0% {	-webkit-transform:rotate(0) translateX(-100px) translateY(30px);	-webkit-animation-timing-function:linear;	background-color:rgba(255,255,255,0);	}	5% {	-webkit-transform:rotate(0deg) translateX(0) translateY(30px);	-webkit-animation-timing-function:cubic-bezier(0.1,0.5,0.9,0.5);	background-color:rgba(255,255,255,1);	}	30% {	-webkit-transform:rotate(-360deg) translateX(0) translateY(30px);	-webkit-animation-timing-function:cubic-bezier(0.1,0.5,0.9,0.5);	background-color:rgba(255,255,255,1);	}	55% {	-webkit-transform:rotate(-720deg) translateX(0) translateY(30px);	-webkit-animation-timing-function:cubic-bezier(0.1,0.5,0.9,0.5);	background-color:rgba(255,255,255,1);	}	80% {	-webkit-transform:rotate(-1080deg) translateX(0) translateY(30px);	-webkit-animation-timing-function:linear;	background-color:rgba(255,255,255,1);	}	85%{	-webkit-transform:rotate(-1080deg) translateX(100px) translateY(30px);	-webkit-animation-timing-function:linear;	background-color:rgba(255,255,255,0);	}	100% {	-webkit-transform:rotate(0) translateX(-100px) translateY(30px);	-webkit-animation-timing-function:linear;	background-color:rgba(255,255,255,0);	}
}
Win8 loading - Script Codes
Win8 loading - Script Codes
Home Page Home
Developer TabSpace
Username tabspace
Uploaded November 22, 2022
Rating 3
Size 1,988 Kb
Views 18,216
Do you need developer help for Win8 loading?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

TabSpace (tabspace) Script Codes
Name
Gradient-ui-button
Gift Card
Svg-circle-progress
Gradient-ui-button-material
Gradient-ticket-transparent
Gradient-ui-progress-bar
Gradient-mask-image
Test css counter
Gradient-demo-wave
Iscroll-select-base
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!