Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Lewoaragao committed Nov 29, 2023
0 parents commit 2e83bb4
Show file tree
Hide file tree
Showing 6 changed files with 728 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Auto detect text files and perform LF normalization
* text=auto
674 changes: 674 additions & 0 deletions LICENSE

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# video10-spinner
Spinner | HTML CSS
12 changes: 12 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spinner</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="spinner"></div>
</body>
</html>
Binary file added preview.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
:root {
--light-white: #f5f5f5;
--white: #cecbca;
--green: #3cb371;
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: var(--light-white);
}

.spinner {
border: 4px solid var(--white);
border-top: 4px solid var(--green);
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

0 comments on commit 2e83bb4

Please sign in to comment.