I have a requirement where I need to load js files dynamically and show the progress of loading files through a SVG icon. The SVG icon will act as progress bar where it fills with a color from bottom to top, linearly.
Here is the codepen
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<path fill="transparent" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</svg>
I am planning to make this icon independent such that I will only pass the percentage value dynamically.
I somehow able to get the animation done but unable to keep the border or outline of the svg. Here is the code.
#progressMove {
transition: .3s y;
}
#progressMove:hover {
y: 60%;
}
<svg id="kenseoProgress" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<defs>
<mask id="bubbleKenseo">
<path fill="red" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</mask>
</defs>
<g x="0" y="0" width="79.36px" height="93.844px" mask="url(#bubbleKenseo)" height="100">
<rect id="progressMove" x="0" y="0%" width="100%" height="100%" fill="blue" stroke="black" />
</g>
</svg>
So, the problems I have are:
PS: I don't want to use SMIL animations.
Using the CSS property transform
and counter-increment
you can achieve the fill and number increment.
jsFiddle
for (var i = 0; i < 100; i++) {
setTimeout(function() {
$(".progress-container p").append("<span>");
}, i * 20);
}
pattern #progressMove {
transform: translateY(100%);
color: purple;
animation: progressBar 2s steps(100, end) forwards;
}
@keyframes progressBar {
to {
transform: translateY(0);
}
}
.progress-container {
margin: 0;
display: inline-block;
position: relative;
counter-reset: progress;
}
.progress-container figcaption {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-40%, -50%);
}
.progress-container p {
margin: 0;
font-weight: bold;
}
.progress-container span {
counter-increment: progress;
}
.progress-container p::after {
content: counter(progress)"%";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="progress-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<pattern id="progress" x="0" y="0" width="79.36" height="93.844" patternUnits="userSpaceOnUse">
<rect id="progressMove" x="0" y="0" width="100%" height="100%" stroke="none" fill="currentColor" />
</pattern>
<path fill="url(#progress)" stroke="#000" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</svg>
<figcaption>
<p>
</p>
</figcaption>
</figure>
Note:
Will update if I can give a better solution to cover browser support.
Based on Persijn answer, you will as well have to change the color of the background to that of its parent.
The whole component would be the figure
element, sadly the symbol in the spritesheet will only be used to provide the path and background.
Note: jQuery removed in this version.
jsFiddle
for (var i = 0; i < 100; i++) {
setTimeout(function() {
var progressCounter = document.querySelector(".progress__counter"),
number = document.createElement("span");
progressCounter.appendChild(number);
}, i * 20);
}
#spritesheet {
display: none;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
}
.icon-bubble {
font-size: 7em;
color: white;
}
.progress-container {
margin: 0;
display: inline-block;
position: relative;
counter-reset: progress;
overflow: hidden;
line-height: 0;
}
.progress__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.progress__fill {
background-color: purple;
height: 100%;
transform: translateY(100%);
animation: progressFill 2s steps(100, end) forwards;
}
@keyframes progressFill {
to {
transform: translateY(0);
}
}
.progress__counter {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-40%, -50%);
margin: 0;
font-weight: bold;
}
.progress__counter span {
counter-increment: progress;
}
.progress__counter::after {
content: counter(progress)"%";
}
<figure class="progress-container">
<svg class="icon icon-bubble">
<use xlink:href="#icon-bubble"></use>
</svg>
<figcaption class="progress__inner">
<div class="progress__fill"></div>
<p class="progress__counter"></p>
</figcaption>
</figure>
<svg id="spritesheet">
<symbol id="icon-bubble" viewBox="0 0 79.36 93.844">
<title>Loading Bubble</title>
<path id="bubble-cover" fill="currentColor" stroke="#000" d="M-10,-10 100,-10 100,100 -10,100 -10,-10 50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</symbol>
</svg>
jsFiddle
for (var i = 0; i < 100; i++) {
setTimeout(function() {
var progressCounter = document.querySelector(".progress__counter"),
number = document.createElement("span");
progressCounter.appendChild(number);
}, i * 20);
}
#spritesheet {
display: none;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
}
.icon-bubble {
font-size: 7em;
color: white;
}
.progress-container {
margin: 0;
display: inline-block;
position: relative;
counter-reset: progress;
overflow: hidden;
line-height: 0;
}
.progress__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.progress__fill {
background-color: purple;
height: 100%;
transform: translateY(100%);
animation: progressFill 2s steps(100, end) forwards, progressFillColor 100ms linear 2s forwards;
position: relative;
}
@keyframes progressFill {
to {
transform: translateY(0);
}
}
@keyframes progressFillColor {
to {
background-color: green;
}
}
.progress__counter {
position: absolute;
top: 40%;
transform: translateY(-40%);
text-align: center;
width: 100%;
margin: 0;
font-weight: bold;
animation: progressCounter 100ms linear 1s forwards;
}
.progress__counter span {
counter-increment: progress;
}
.progress__counter::after {
content: counter(progress)"%";
animation: progressCounterCompleted 1s linear 2s forwards;
}
@keyframes progressCounter {
to {
color: white;
}
}
/* Chrome Only*/
@keyframes progressCounterCompleted {
33% {
content: "File(s)";
}
66% {
content: "Uploaded";
}
100% {
content: "Successfully!";
}
}
<figure class="progress-container">
<svg class="icon icon-bubble">
<use xlink:href="#icon-bubble"></use>
</svg>
<figcaption class="progress__inner">
<div class="progress__fill"></div>
<p class="progress__counter"></p>
</figcaption>
</figure>
<svg id="spritesheet">
<symbol id="icon-bubble" viewBox="0 0 79.36 93.844">
<title>Loading Bubble</title>
<path id="bubble-cover" fill="currentColor" stroke="#000" d="M-10,-10 100,-10 100,100 -10,100 -10,-10 50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</symbol>
</svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With