Transform your website's user interface with our step-by-step guide to creating a stunning tile spinner using HTML and CSS. Dive into the world of front-end magic!
Table of Contents
Welcome to the world of web design! In this tutorial, we'll explore the creation of a tile spinner using HTML and CSS. A tile spinner adds a dynamic and interactive element to your website, enhancing user engagement.
Let's start making a spinner/loader using HTML and CSS step by step.
Join My Telegram Channel to Download the Project Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To begin, set up the HTML structure. Use div elements to represent a tile and ensure a clear and organized layout.
Let's break down the HTML code:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML. In this case, it's HTML5.
2. <html lang="en">: This opening tag signifies the beginning of the HTML document. The lang attribute is set to "en," indicating that the primary language of the document is English.
3. <head>: This section contains meta-information about the HTML document, such as the character set, viewport settings, and the title of the page.
- <meta charset="UTF-8">: This meta tag specifies the character encoding for the document, and "UTF-8" is a widely used encoding that supports a wide range of characters.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is used to set the compatibility mode for Internet Explorer. It indicates that the page should be rendered using the latest version available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag defines the viewport settings for responsive design. It ensures that the webpage is displayed appropriately on devices with different screen sizes. The width=device-width means the viewport width should be equal to the device width, and initial-scale=1.0 sets the initial zoom level to 1.0.
- <title>Pure CSS Tile Spinner</title>: This is the title of the HTML document, which is typically displayed in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: This line links an external CSS (Cascading Style Sheets) file named "styles.css" to the HTML document. The styles in this CSS file will be applied to the HTML elements.
4. <body>: This is the opening tag for the body of the HTML document, where the actual content is placed.
- <div class="loader">: This div element has the class "loader." It's commonly used to create loading spinners or other loading indicators on web pages.
- <div class="tile"></div>: This inner div element has the class "tile." It seems to be part of a spinner or loading animation. The styling for these elements is defined in the linked "styles.css" file.
Step 2 (CSS Code):
Once the basic HTML structure of the spinner is in place, the next step is to add styling to the spinner using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our spinner.
Let's break down the code:
1. :root selector:
- Sets global CSS variables (custom properties).
- box-sizing: Sets the box-sizing property to border-box for all elements.
- height: Sets the height of the root element to 100%.
- -webkit-font-smoothing: Improves font rendering by enabling antialiasing.
- background-color: Sets the background color using a CSS variable or a default HSL color.
- color: Sets the text color using a CSS variable or a default HSL color.
- background-image: Sets a radial gradient background.
2. *, :before, :after selectors:
- Inherit the box-sizing property to all elements.
3. body selector:
- Sets minimum height to 100%.
- Uses flexbox to center the content both horizontally and vertically.
- Sets the line height to 1.375.
4. .loader class:
- Defines a loader container with a custom property --speed set to 1000ms.
5. .loader .tile class:
- Represents a tile within the loader.
- Sets width, height, animation, transform-origin, and will-change properties.
6. .loader .tile::before:
- Represents a pseudo-element of the tile.
- Sets content, width, height, border-radius, background-color, animation, and will-change properties.
7. .loader::after:
- Represents an after pseudo-element of the loader.
- Sets content, width, height, background-color, border-radius, position, z-index, animation, filter, and will-change properties.
8. @keyframes:
- Defines three keyframe animations: jump, spin, and shadow.
- jump: Describes a bouncing effect.
- spin: Describes a spinning effect with a changing border-radius.
- shadow: Describes a shadow effect with scale and blur changes.
This will give our spinner an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
:root {
box-sizing: border-box;
height: 100%;
-webkit-font-smoothing: antialiased;
background-color: var(--color-root, hsl(210 18% 44%));
color: var(--color-text, hsl(210 15% 96%));
background-image: radial-gradient(#fff4, #fff0);
}
*,
:before,
:after {
box-sizing: inherit;
}
body {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
line-height: 1.375;
}
.loader {
--speed: 1000ms;
position: relative;
font-size: 2.5em;
}
.loader .tile {
width: 1em;
height: 1em;
animation: var(--speed) ease infinite jump;
transform-origin: 0 100%;
will-change: transform;
}
.loader .tile::before {
content: "";
display: block;
width: inherit;
height: inherit;
border-radius: 0.15em;
background-color: currentColor;
animation: var(--speed) ease-out infinite spin;
will-change: transform;
}
.loader::after {
content: "";
display: block;
width: 1.1em;
height: 0.2em;
background-color: #0132;
border-radius: 60%;
position: absolute;
left: -0.05em;
bottom: -0.1em;
z-index: -1;
animation: var(--speed) ease-in-out infinite shadow;
filter: blur(0.02em);
will-change: transform filter;
}
@keyframes jump {
0% {
transform: scaleY(1) translateY(0);
}
16% {
transform: scaleY(0.6) translateY(0);
}
22% {
transform: scaleY(1.2) translateY(-5%);
}
24%,
62% {
transform: scaleY(1) translateY(-33%);
}
66% {
transform: scaleY(1.2) translateY(0);
}
72% {
transform: scaleY(0.8) translateY(0);
}
88% {
transform: scaleY(1) translateY(0);
}
}
@keyframes spin {
0%,
18% {
transform: rotateZ(0);
border-radius: 0.15em;
}
38% {
border-radius: 0.25em;
}
66%,
100% {
transform: rotateZ(1turn);
border-radius: 0.15em;
}
}
@keyframes shadow {
0% {
transform: scale(1);
filter: blur(0.02em);
}
25%,
60% {
transform: scale(0.8);
filter: blur(0.06em);
}
70% {
transform: scale(1.1);
filter: blur(0.02em);
}
90% {
transform: scale(1);
}
} Final Output:
Conclusion:
Congratulations! You've successfully crafted an interactive tile spinner using HTML and CSS. Apply these techniques to elevate your web design skills and create captivating user interfaces.
Code by: Jason Hibbs
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
