We use cookies to ensure you get the best experience on our website
Home Explore Help
Sign In
mirror
/
assets
mirror of https://github.com/vladimirok5959/assets.git
2
0
Fork 0
Files Wiki
Browse Source

Loading animation

Volodymyr Tkach 2 years ago
parent
0315b8d6a3
commit
e02f06be3a
2 changed files with 23 additions and 1 deletions
Split View Show Diff Stats
  1. 22 0
      css/layouts/cp/base.css
  2. 1 1
      css/layouts/cp/example.html

+ 22 - 0
css/layouts/cp/base.css
View File 

@@ -18,6 +18,28 @@ body.cp header {
 
 	z-index: 3;
 
 }
 
 
+@keyframes loading-movement{
 
+	0% {
 
+		background-position: 0 0;
 
+	}
 
+	to {
 
+		background-position: 50px 50px;
 
+	}
 
+}
 
+
 
+body.cp.loading header:before {
 
+	animation: loading-movement 2s linear infinite;
 
+	background-image: linear-gradient(-45deg, hsla(0, 0%, 100%, .05) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .05) 0, hsla(0, 0%, 100%, .05) 75%, transparent 0, transparent);
 
+	background-size: 50px 50px;
 
+	bottom: 0;
 
+	content: "";
 
+	left: 0;
 
+	position: absolute;
 
+	right: 0;
 
+	top: 0;
 
+	z-index: 1;
 
+}
 
+
 
 body.cp .wrap {
 
 	align-items: stretch;
 
 	display: block;

+ 1 - 1
css/layouts/cp/example.html
View File 

@@ -8,7 +8,7 @@
 
 		<link rel="stylesheet" href="./../../reset.css">
 
 		<link rel="stylesheet" href="./base.css">
 
 	</head>
 
-	<body class="cp">
 
+	<body class="cp loading">
 
 		<header>
 
 			Text
 
 		</header>