前端日常实战：136#视频演示如何使用D3和GSAP制作横条加载器

居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器的大小：.loader{width:40em;高度：1em；font-size:10px;}设置容器内span的样式，为彩色细长条:.loader{position:relative;}.loaderspan{position:absolute;宽度：继承；身高：继承；background-color:hsl(24,100%,65%);}importd3.js:删除跨度dom中的元素，使用d3创建，其中常量COUNT为细长条的个数，因为d3.range()生成的数据是从0开始的系列，所以将数据修正为从1开始的系列日常习惯：constCOUNT=1;d3.select('.loader').selectAll('span').data(d3.range(COUNT).map(d=>d+1)).enter().append('span')删除css中设置span元素的background-color属性的代码，改用d3设置：d3.select('.loader').selectAll('span').data(d3.range(COUNT).map(d=>d+1)).enter().append('span').style('background-color',`hsl(24,100%,65%)`)将细长条数改为2，颜色改为动态生成：constHUE_DEG=12;常数计数=2；d3.select('.loader')/*...slightly*/.style('background-color',(d)=>`hsl(${d*HUE_DEG},100%,65%)`)一个进一步，将颜色更改为彩条和黑条间隔出现，请注意，虽然表达式中的色调值增加了12，但实际效果是彩条之间的色相差为24，因为里面混杂了黑色Strip:d3.select('.loader')/*...略*/.style('background-color',(d)=>d%2!==0?`hsl(${d*HUE_DEG},100%,65%)`:'黑色');此时动态生成的dom结构为：