Results preview
Press the "click Preview" button to the right of the current page preview, click on the link full-screen preview.
https://codepen.io/zhang-ou/pen/deNqdV
Interactive video tutorials
This video is interactive, you can pause the code video, editing video.
Please use chrome, safari, edge open view.
Source code download
Please download from github.
https://github.com/comehope/front-end-daily-challenges/tree/master/008-charging-loader-animation
Code Reading
Define dom, only one container element:
<div class="battery"></div>
Centered:
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, teal, aqua);
}
Draw the outline of the main battery:
.battery {
width: 6em;
height: 3em;
color: midnightblue;
border: 0.5em solid currentColor;
border-radius: 0.2em;
font-size: 2em;
}
Battery projection shown:
.battery {
position: relative;
}
.battery::after {
content: '';
position: absolute;
width: 0.5em;
height: 2em;
background-color: currentColor;
top: 0.5em;
right: -1em;
border-radius: 0 0.2em 0.2em 0;
}
Draw charge capacity:
.battery {
background-image: linear-gradient(to right, whitesmoke, whitesmoke);
background-repeat: no-repeat;
background-size: 30% 80%;
background-position: 0.3em 50%;
}
Definition and application of animation:
@keyframes charge {
from {
background-size: 10% 80%;
}
to {
background-size: 95% 80%;
}
}
.battery {
animation: charge 5s linear infinite;
}
Finally, the animation by a linear function of time to change the step size:
.battery {
animation: charge 5s steps(8) infinite;
}
We're done!
Knowledge Point
linear-gradient() https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
background-position https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
steps() https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function#Timing_functions
currentColor https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Values
border-radius https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius