Untitled (ct5h6h3v) - PasteCode.dev

Untitled

public

Guest Nov 29, 2024 Never 15

Plaintext paste1.txt 46 lines (40 loc) | 1.19 KB

Raw

This code is a basic HTML document that creates a simple loading animation using CSS. Here is an analysis of the code: 1. The document starts with the `<!DOCTYPE html>` declaration, which specifies the document type and version of HTML being used. 2. The HTML document contains the following structure: - `html` element with the `lang` attribute set to "en". - `head` section that includes meta tags for character set and viewport settings, as well as setting the title of the document. - `style` block within the `head` section containing CSS rules for styling the loading animation. - `body` section that contains a `div` element with a class of "loader", which will display the loading animation. 3. In the CSS section: - Body is styled to display flex, horizontally and vertically center the content, set the height to 100vh (viewport height), remove margin, and set the background color to a light gray. - The loader class styles the loading animation with a width and height of 80px, a circular shape with a border, and a border that changes color during animation. - The `@keyframes` rule defines two animations: - `spin` animates the rotation of the circular loader with a 360-degree rotation. - `colorChange` animates the change in border top color by progressing through different colors at specific intervals. 4. The `div` element with the class "loader" will display a spinning circular loading animation with changing colors. Overall, this code creates a visually appealing loading animation that rotates and changes color in a loop to give a cool visual effect of a loading process.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6     <title>Cool Loading Animation</title>
7     <style>
8         body {
9             display: flex;
10             justify-content: center;
11             align-items: center;
12             height: 100vh;
13             margin: 0;
14             background-color: #f0f0f0;
15         }
16  
17         .loader {
18             width: 80px;
19             height: 80px;
20             border: 8px solid #f3f3f3;
21             border-top: 8px solid #3498db;
22             border-radius: 50%;
23             animation: spin 1.5s linear infinite, colorChange 2s ease-in-out infinite;
24         }
25  
26         @keyframes spin {
27             0% { transform: rotate(0deg); }
28             100% { transform: rotate(360deg); }
29         }
30  
31         @keyframes colorChange {
32             0% { border-top-color: #3498db; }
33             25% { border-top-color: #e74c3c; }
34             50% { border-top-color: #f39c12; }
35             75% { border-top-color: #2ecc71; }
36             100% { border-top-color: #3498db; }
37         }
38  
39     </style>
40 </head>
41 <body>
42  
43     <div class="loader"></div>
44  
45 </body>
46 </html>

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Cool Loading Animation</title>
7	<style>
8	body {
9	display: flex;
10	justify-content: center;
11	align-items: center;
12	height: 100vh;
13	margin: 0;
14	background-color: #f0f0f0;
15	}
16
17	.loader {
18	width: 80px;
19	height: 80px;
20	border: 8px solid #f3f3f3;
21	border-top: 8px solid #3498db;
22	border-radius: 50%;
23	animation: spin 1.5s linear infinite, colorChange 2s ease-in-out infinite;
24	}
25
26	@keyframes spin {
27	0% { transform: rotate(0deg); }
28	100% { transform: rotate(360deg); }
29	}
30
31	@keyframes colorChange {
32	0% { border-top-color: #3498db; }
33	25% { border-top-color: #e74c3c; }
34	50% { border-top-color: #f39c12; }
35	75% { border-top-color: #2ecc71; }
36	100% { border-top-color: #3498db; }
37	}
38
39	</style>
40	</head>
41	<body>
42
43	<div class="loader"></div>
44
45	</body>
46	</html>