Revert "Add loading Animation to Most used Language card (#2197)" (#2396)

This reverts commit 77dcdab42c.
This commit is contained in:
Rick Staa
2023-01-12 22:52:34 +01:00
committed by GitHub
parent 70f0264905
commit 4b8198fa21
5 changed files with 29 additions and 76 deletions
+8 -11
View File
@@ -10,7 +10,6 @@ import { clampValue } from "./utils.js";
* @param {string} createProgressNodeParams.color Progress color.
* @param {string} createProgressNodeParams.progress Progress value.
* @param {string} createProgressNodeParams.progressBarBackgroundColor Progress bar bg color.
* @param {number} createProgressNodeParams.delay Delay before animation starts.
* @returns {string} Progress node.
*/
const createProgressNode = ({
@@ -20,22 +19,20 @@ const createProgressNode = ({
color,
progress,
progressBarBackgroundColor,
delay,
}) => {
const progressPercentage = clampValue(progress, 2, 100);
return `
<svg width="${width}" x="${x}" y="${y}">
<rect rx="5" ry="5" x="0" y="0" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
<svg data-testid="lang-progress" width="${progressPercentage}%">
<rect
height="8"
fill="${color}"
rx="5" ry="5" x="0" y="0"
class="lang-progress"
style="animation-delay: ${delay}ms;"
/>
</svg>
<rect
height="8"
fill="${color}"
rx="5" ry="5" x="0" y="0"
data-testid="lang-progress"
width="${progressPercentage}%"
>
</rect>
</svg>
`;
};