Loading animations are an important part of user interface design, helping to indicate to users that something is happening in the background. In this article, we'll explore how to create a loading animation with text in the center of the screen, with a dark background and white loading text.
Step 1: Creating the HTML
First, we'll create the basic HTML structure for our loading animation. We'll use a div element to create the dark background, and another div element to create the loading text in the center.
<!DOCTYPE html>
<html>
<head>
<title>Loading Animation</title>
<style>
body {
margin: 0;
padding: 0;
}
.loading-background {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #222;
opacity: 0.8;
z-index: 9999;
}
.loading-text {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
font-weight: bold;
z-index: 10000;
}
</style>
</head>
<body>
<div class="loading-background"></div>
<div class="loading-text">Loading...</div>
</body>
</html>
In the above code, we have created two div elements. The first div element has a class of "loading-background", which is used to create the dark background. We have set the position to "fixed" to ensure that the background covers the entire screen, regardless of the size of the content. We have also set the background color to #222 and the opacity to 0.8 to create a dark, semi-transparent background.
The second div element has a class of "loading-text", which is used to create the loading text in the center of the screen. We have set the position to "fixed" and used the transform property to center the text vertically and horizontally on the screen. We have set the color to #fff and the font-size and font-weight properties to make the text stand out.
Step 2: Adding Animation
Next, we'll add some animation to our loading text. We'll use CSS3 animations to create a rotating animation that will make the loading text more dynamic.
.loading-text {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
font-weight: bold;
z-index: 10000;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
In the above code, we have added the "animation" property to the ".loading-text" class, and set it to a keyframe animation called "rotate". We have also set the animation duration to 2 seconds, and set the animation to repeat infinitely.
The "rotate" animation uses the "transform" property to rotate the loading text. The "from" keyframe sets the rotation to 0 degrees, while the "to" keyframe sets it to 360 degrees. This creates a smooth, continuous rotation that adds a bit of visual interest to the loading animation.
Step 3: Using JavaScript to show and hide the loading animation
Finally, we'll use JavaScript to show and hide the loading animation when needed
Komentar
Posting Komentar