Elevate CSS Skills: Build a Charging Animation using HTML CSS

Immerse yourself in a visually captivating charging animation created with this HTML and CSS code. Watch as a dynamic and animated charging symbol comes to life with a percentage indicator.

Read More: Interactive Credit Card using HTML, CSS and JavaScript

The code includes a unique particle path that adds an extra layer of visual intrigue to your project. Perfect for showcasing loading or charging processes in an engaging and eye-catching way.

<div class="main-container flex-c">
    <div class="outer-body flex-c">
        <div class=" container flex-c">
            <div class="charging flex-c">
                <div class="inner flex-c"></div>
                <div class="content">
                    <div class="percent">99%</div>
                    <div class="symbol">&#9889;</div>
                </div>
            </div>
            <div class="path">
                <div class="particles">
                    <span></span><span></span><span></span><span></span>
                </div>
            </div>
        </div>
    </div>
</div>

The HTML code represents a centered container with a charging animation. The outermost div with class "main-container" holds the entire animation and is centered on the screen. Within this container, there is an <div class="outer-body"> which serves as another centered container. Inside this, the <div class="container"> element encapsulates the charging animation itself.

Charging Animation

• The charging animation is created using the <div class="charging"> element. Within this, there's an inner <div class="inner"> which acts as the background of the animation. The charging symbol and the percentage indicator are placed inside the <div class="content">.

Charging Symbol

• The charging symbol consists of a <div class="percent"> to display the charging percentage (in this case, 99%) and a <div class="symbol"> which displays the charging symbol (a lightning bolt emoji).

Must Read: Realistic Candle using HTML and CSS only

Particle Path

• The <div class="path"> element represents the path on which particles move. The particles themselves are created using the <div class="particles">, and there are four of them in this code. These particles likely move along the path, although the animation logic is not provided in this snippet.

.flex-c {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-container {
    min-width: 350px;
    min-height: 100vh;
}

.outer-body {
    width: 280px;
    height: 550px;
    overflow: hidden;
    position: relative;
    border-radius: 30px;
    background: linear-gradient(rgb(187, 187, 252), rgb(137, 255, 137));
}

.outer-body::before {
    content: '';
    width: 275px;
    height: 545px;
    background: #000;
    border-radius: 30px;
}

.outer-body::after {
    top: 3%;
    content: '';
    width: 30%;
    position: absolute;
    border-radius: 10px;
    border: 2px solid #818181;
}

.container {
    bottom: 3px;
    width: 100%;
    height: 245px;
    overflow: hidden;
    position: absolute;
    align-items: flex-start;
}

.container::after {
    content: '';
    width: 25%;
    height: 25%;
    bottom: -20%;
    filter: blur(20px);
    position: absolute;
    background: #49e3a878;
    border-radius: 50% 50% 0 0;
}

.charging {
    height: 55%;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    border: 1px solid white;
}

.charging::before {
    content: '';
    height: 92%;
    width: 92%;
    border-radius: 50%;
    position: absolute;
    border: 1px solid #444444;
}

.inner {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
    box-shadow: inset 0px 0px 7px 0px #ffffff45;
    background: linear-gradient(135deg, #9cbbe5, #49e3a7);
}

.inner::before {
    content: '';
    width: 80%;
    height: 80%;
    filter: blur(5px);
    border-radius: 40%;
    background: #000;
}

.content {
    color: white;
    font-size: 17px;
    position: absolute;
    font-family: calibri;
}

.symbol {
    text-shadow: 0px 0px 10px white;
}

.path {
    bottom: 0;
    height: 48%;
    width: 53px;
    display: flex;
    overflow: hidden;
    position: absolute;
    background: black;
    justify-content: center;
}

.path::after,
.path::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    border: 1px solid white;
}

.path::before {
    left: -85%;
    border-radius: 58px 22px 0 0;
}

.path::after {
    right: -85%;
    border-radius: 22px 58px 0 0;
}

.particles {
    width: 65%;
    height: 100%;
    display: flex;
    position: absolute;
    justify-content: space-evenly;
}

.path span {
    width: 2%;
    height: 25%;
    transform: translateY(120px);
    animation: flow .8s ease-in-out infinite;
    background: linear-gradient(rgb(250, 252, 255), #49e3a85c, transparent);
}

.path span:nth-child(2) {
    animation-delay: .5s;
}

.path span:nth-child(3) {
    animation-delay: 1s;
}

.path span:nth-child(4) {
    animation-delay: 1.2s;
}

@keyframes flow {
    to {
        transform: translateY(-30px);
    }
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

Global Reset

• The code begins with a global reset for all elements, setting margins, paddings, and box-sizing to ensure consistent rendering.

Container Styling:

• The #main-container is set to occupy the full viewport width and height with a minimum width of 300px.
• The "centered" class is used to center elements both horizontally and vertically using flexbox.

Outer Body Styling

• The #outer-body represents a container with a gradient background.
• It has rounded corners and a pseudo-element ::before to create a dark border around it.
• Another pseudo-element ::after is used to add a decorative element to the top of the container.

Charging Animation

• The #container is positioned at the bottom of the outer body and has rounded corners.
• A pseudo-element ::after is used to create a circular gradient effect at the bottom of this container.
• The #charging element represents a circular charging indicator.
• It has a pseudo-element ::before to add depth and border to the indicator.
• The #inner element inside the charging indicator is animated to create a rotating effect.
• It also has a pseudo-element ::before with a blur effect.

Particle Path Styling

• The #path element represents a curved path for particles.
• It has pseudo-elements ::before and ::after to create decorative shapes at the edges.
• The #particles element contains individual particles (<span> elements) that move along the path.
• These particles are styled with gradient backgrounds and animation to simulate movement.

Keyframe Animations

• Two keyframe animations, flow and rotate, are defined to control particle movement and charging indicator rotation, respectively.

In conclusion, the provided CSS code creates an engaging and visually appealing charging animation. It combines various design elements and techniques to achieve its effect. Key features include the centered layout, gradient backgrounds, rounded corners, and creative use of pseudo-elements. 

Whether used for a loading screen, a futuristic interface, or simply as a creative display, this CSS code demonstrates the power of CSS in crafting visually striking web elements. Feel free to incorporate and adapt this code to elevate your web projects and captivate your audience with impressive visual experiences.

Download