This code creates a small, colourful loader that consists of three bars that move up and down in sequence. The animation is achieved using CSS keyframes, and the colours and timing can be easily customized by modifying the CSS properties.
In the below code, the HTML consists of a container element with a class of "loader" and three child elements with a class of "bar". These child elements will be the coloured bars that move up and down to create the loader effect.
Code:
<!DOCTYPE html>
<html>
<title>Online CSS Editor</title>
<head>
<style>
.loader {
display: inline-block;
position: relative;
width: 50px;
height: 20px;
}
.bar {
position: absolute;
height: 100%;
width: 6px;
border-radius: 4px;
animation: loader-animation 1s ease-in-out infinite;
}
.bar1 {
background-color: #f44336; /* Red */
left: 0;
animation-delay: 0.2s;
}
.bar2 {
background-color: #2196f3; /* Blue */
left: 12px;
animation-delay: 0.3s;
}
.bar3 {
background-color: #4caf50; /* Green */
left: 24px;
animation-delay: 0.4s;
}
@keyframes loader-animation {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.5);
}
40% {
transform: scale(1);
}
}
</style>
</head>
<body>
<h2>Colourful CSS Bar Loader</h2>
<div class="loader">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
</body>
</html>Output:
.loader
This CSS applies styles to the loader container. It sets the display to "inline-block" so that the container takes up only as much width as necessary and does not break the flow of text on the page. It also sets the position to "relative" so that the child elements with position "absolute" are positioned relative to the container. The width and height properties define the dimensions of the loader container.
.bar
This CSS applies styles to the child elements with the class "bar". It sets the position to "absolute" so that each bar can be positioned precisely within the container. The height is set to 100% so that each bar fills the entire height of the container. The width defines the thickness of each bar, and the border radius creates rounded corners. The animation property specifies the name of the animation to apply to the bars, the duration (1s), the timing function (ease-in-out), and the iteration count (infinite, meaning the animation will repeat indefinitely).
.bar 1, .bar 2, .bar 3
This CSS applies styles to each individual bar element. It sets the background colour to a different colour for each bar using hexadecimal colour codes. The left property positions the bars within the container, with each bar starting at a different position to create a staggered effect. The animation-delay property specifies a delay time for each bar so that they move up and down in sequence instead of all at once.
@keyframes
This CSS defines the keyframes for the animation that is applied to the bars. It specifies three keyframes at 0%, 20%, and 40% of the animation duration. Each keyframe specifies a different transform property for the bars, which scales them vertically to create the up-and-down movement.