加载列表数据时加载微调器答案

【问题标题】：Loading spinner while loading list data加载列表数据时加载微调器
【发布时间】：2019-11-27 00:36:02
【问题描述】：

我有一个手风琴，我在其中使用 ul li 列表，其中包含很多 li 列表。当用户单击手风琴查看数据时，我想在从服务器获取数据时显示加载器。获取数据后，加载程序将隐藏并显示数据。提前致谢。

   Here is codepen: https://codepen.io/uibeast/pen/rXNePa

【问题讨论】：

能否贴出html代码。问题也不清楚
对于这种情况，您需要一个 ajax 方法，当在成功方法中完成获取数据时，删除或隐藏微调器 @Thameem

标签： jquery html load html-lists loader

【解决方案1】：

_loader-bar.sass

.loader-bar

// Before 用于数据文本属性 &[数据文本]：之前顶部：计算（50% - 40px）颜色：$loader-bar--text-color

&:之后内容： '' 位置：固定最高：50% 左：50% 宽度：200 像素高度：20px 变换：翻译（-50%，-50%）背景：线性渐变（-45deg，$loader-bar--color-secondary 25%，$loader-bar--color 25%，$loader-bar--color 50%，$loader-bar--color-secondary 50%, $loader-bar--color-secondary 75%, $loader-bar--color 75%, $loader-bar--color) 背景尺寸：20px 20px 盒子阴影：插图 0 10px 0 rgba(255, 255, 255, .2), 0 0 0 5px rgba(0, 0, 0, .2) 动画：moveBar 1.5s 线性无限反转

&[数据四舍五入] ＆：后边框半径：15px

&[数据反转] ＆：后动画方向：正常

// 条形动画 @keyframes 移动栏从背景位置：0 0

到背景位置：20px 20px

loader-bar.sass 中的下一步

@import './config'

@import './general/base'

@import './loaders/loader-bar'

【讨论】：