文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

LayUI实现loading动画和居中显示

背景 近期在开发质量分析平台的时候，我选择使用对后端友好的LayUI框架，但是在使用layui-card的时候，发现向其中插入一个loading的图标，这个图标是在左上角的，我想要将其居中。...解决办法 1、图标居中展示 居中展示有很多种方法，可以使用原生的css来实现，但是为了方便和可靠，我直接选择使用flex布局。...上下左右同时居中就是我们想要的结果。 最终效果 最后我们给layui-card加上我们定义的class即可。...想要让我们的图标动起来，我们就要用到LayUI的动画效果。...我们想要的动画就是这个loading图标360度旋转，并且一直循环，直到最后使用数据重新渲染layui-card。

6.9K10

【图文教程】不需代码！Figma里这样完成悬浮FAB按钮制作，半小时搞定！

设计提示：将组添加到图标层并应用自动布局 - 居中。将您的填充添加到自动布局图层。添加填充和角半径以达到所需的效果。这使我们能够以更少的层次更快地进行更改。...对于间距，我将“edit”对齐在“Add”按钮上方 32 像素，“speak”在“add”左侧 32 像素，最后是媒体，在“speak”上方 16 像素，在“edit”左侧 16 像素。...4.复制Action按钮框架，将所有项目居中对齐 这将是我们的关闭状态。选中所有项目后，居中对齐。 快速提示：选中所有项目后，先对齐右下角，然后对齐中心。...如果我们首先对齐中心，所有项目都会移动到中心，这需要我们然后将框架中的所有层重新居中。这样我们也可以快速与框架对齐。...5.旋转添加按钮图标-45度 回到打开状态，旋转添加图标，使加号图标变成关闭图标的效果。如果使用自动布局，请确保我们的框架高度和宽度设置为“固定”。

3.3K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    前端架构师之路03_移动端规范兼容处理

    、首尾分布排列等考虑使用 flex 布局 垂直居中使用 flex 实现垂直居中 尽量使用 border-radius，box-shadow，text-shadow 等 CSS3 样式实现诸如圆角、渐变色...、盒子投影、字体投影等，减少使用图片 对于单色的 icon 图标，利用 字体图标 导入，这样的话，可以像修改字体一样随意地修改图标的颜色、大小、背景色、特殊效果（如投影）等，而不再需要每一种颜色就需要切一份图片...利用 transform:rotate(90deg) 来获取旋转了不同角度的 icon，避免每个角度需要切一张图片 在动画中，利用 CSS3 动画属性如 transform:translate(x,y...) 来改变元素的偏移位置，减少使用 left 和 top 来做位移动画 2 图片模糊处理 理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。...对于高清屏而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以导致图片看起来比较模糊。 对于图片模糊问题，比较好的方案就是用多倍图片(@2x)。

    1K10

    【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

    flex-direction: column; /* 水平方向居中对齐 , 即 侧轴方向 ( x 轴方向 ) 居中对齐 */ align-items: center; /* 字体大小设置为...x 320 像素 , 每个图标的尺寸为 64 x 64 像素 , 这又是一个二倍精灵图 ; 二倍精灵图设置步骤 : 缩小精灵图 : 在 Firework 中 , 将精灵图缩小一半 ; 测量坐标 : 在缩小一半的精灵图中测量坐标...^="local-nav-icon"] { /* 设置图标的样式 */ /* 图标大小为 32 x 32 像素 */ width: 32px; height: 32px;..., 即 侧轴方向 ( x 轴方向 ) 居中对齐 */ align-items: center; /* 字体大小设置为 12 像素 */ font-size: 12px; }....local-nav li [class^="local-nav-icon"] { /* 设置图标的样式 */ /* 图标大小为 32 x 32 像素 */ width: 32px

    2.2K20

    某IT培训班一阶段前端面试题

    CSS 动画分“过渡动画（transition）”和“关键帧动画（animation）”，核心属性如下：（1）过渡动画（transition，简单动画，需触发条件）transition-property...减少请求次数：小图标合并为雪碧图（CSS Sprite）；使用 CSS 图标/Font Awesome 替代图片图标。CDN 加速：图片部署到 CDN 服务器，就近获取资源，提升加载速度。...，固定长度单位，1px=屏幕 1 个物理像素 否（固定大小） 固定尺寸元素（如边框、图标大小、按钮固定宽高）优点：精准可控；缺点：不支持响应式，不同屏幕尺寸下显示效果不一致...（2）高清图适配（dpr>1 设备）根据 dpr 加载不同尺寸图片，避免图片模糊：x.jpg" srcset="img@1x.jpg 1x, img@2x.jpg...2x, img@3x.jpg 3x" alt="高清图">srcset 属性按 dpr 匹配图片：dpr=1 加载 @1x 图，dpr=2 加载 @2x 图，dpr=3 加载 @3x 图，保证图片清晰

    17620

    【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

    min-width: 320px; max-width: 640px; 3、使用 Flex 弹性布局管理宽度 在搜索框中 , 左侧是搜索栏 , 右侧是搜索按钮 ; 右侧的搜索按钮始终都是 44x44...+ 边框高度 + 内边距 ; 如果要设置垂直居中 , 只能设置其中的 行高 = 内容高度 , 要把 2 像素的边框去掉 ; 因此在该 CSS3 样式中 , 高度设置为 26 像素 , 其中包括了 24...像素的内容高度 , 2 像素的边框高度 ( 上下边框各 1 像素 ) ; /* 设置 高度 = 26 行高 = 24 像素 垂直居中 设置行高 = 26 会偏下 上面的设置.../* 字体颜色 */ color: #000; /* 行高 */ line-height: 1.5; /* 水平方向超出隐藏 */ overflow-x:...点击高亮我们需要清除清除 设置为transparent 完成透明*/ * { -webkit-tap-highlight-color: transparent; } /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式

    2.9K20

    深度解析 Jetpack Compose 布局

    以 Jetsnack 应用中的自定义底部导航为例，在该设计中，如果某项目被选中，则显示标签；如果未被选中，则只显示图标。而且，设计还需要让项目的尺寸和位置根据当前选择状态执行动画。...: Int, @FloatRange(from = 0.0, to = 1.0) animationProgress: Float ): MeasureResult { // 根据动画进度值放置文本和图标...您可以借助下图动画来辅助理解该过程: △ 修饰符链的工作原理 假设这个 Box 要放入最大尺寸为 200*300 像素的容器内，容器会将相应的约束传入修饰符链的第一个修饰符中。...△ 图标和文本居中对齐，图标底部没有落在文本基线上 我们可以通过以下代码进行修复: Row { Icon(modifier = Modifier .size(10. dp)...测量卡片时，就只需要测量正文，它的约束就是布局高度减去 48 DP，卡片的高度则为正文的高度加上 48 DP。

    2.7K30

    【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

    圆角半径为 15 像素 ; 总的高度是 44 像素 , 搜索栏的盒子高度 30 像素 , 设置该高度后 , 需要设置 7 像素的 上边距 , 使得该搜索栏可以垂直居中 ; 如果为中间搜索栏盒子设置一个...margin: 0 50px; /* 左侧和右侧设置为 15 像素圆角 */ border-radius: 15px; /* 将搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷...8 像素 / 下 0 像素 / 左 15 像素 ; css 样式实例 : .jd-icon { /* 搜索框中插入 JD 图标 */ /* 设置 JD 图标的宽高 */...29 像素 , 其左上角坐标位置为 166, 0 位置 ; 精灵图的大小是 400 x 400 像素的 , 计算缩放时 , 需要计算缩放比例 ; 精灵图中放大镜图标为 30 x 29 像素 , 在布局中放大镜图标为...18 x 15 像素 ; 这里将精灵图中的放大镜图标设置为 36 x 30 像素 , 比较好计算 ; 二倍精灵图处理方案 : 在 Firework 中 , 将精灵图缩小一半 ; 在缩小一半的精灵图中测量坐标

    3.7K30

    【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

    , 水平居中 , 先将版心的样式设置给盒子 ; /* 版心宽度 1200 像素 , 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } 该盒子大小为...1200x60 像素 , 该大盒子 , 可以分为如下三个小盒子 , 小盒子中的元素都是垂直居中的 , 可以在大盒子中设置一个行高 , 小盒子自动继承 ; font-xxx , line-xxx...; } 3、中间盒子测量及样式 中间盒子内容为 : | jQuery | ..., 但是左侧有 20 像素内边距变为 340 像素 */ width: 340px; /* 高度 38 像素 但是盒子大小 42 像素 , 设置 40 加上 2 像素边框正好充满 */ height...条顶部有 50 像素的上外边距 */ margin-top: 50px; } /* Banner 条右侧 课程表 头部样式 */ .course-hd { /* 尺寸 228x48 像素 */

    7.5K30

    【Web APIs】JavaScript 操作元素 ④ ( 修改元素属性示例 | 密码表单标签结构 | 密码输入框样式设置 | 右侧图标按钮设置 | JavaScript 修改元素属性示例 )

    : 设置 div 盒子模型的 margin 属性 , 第一个参数表示上下的外边距 , 设置 100 像素 ; 第二个参数 auto 表示水平方向居中 ; /* 上下间距 100...像素，左右自动居中 */ margin: 100px auto; 设置盒子相对定位 : 盒子模型 内部 需要将 图片 使用绝对定位定位到 右侧 垂直居中 位置 , 则 子元素...预留 30 x 30 像素的位置 , 设置后的样式如下 : 设置 border 属性 , 将边框宽度设置为 0 , 就可以取消上述边框 ; /* 去掉边框 */..., 如果将 图片大小设置为 24x24 像素 , 则底部距离图片也有 2 像素 ; /* 绝对定位，相对于最近的非static定位父元素 */ position...right: 2px; 设置的效果如下 : 设置 img 标签大小为 24 x 24 像素 , 即可实现如下效果 : /* 图片宽度高度为24像素 */

    1.5K10

    三种 Loading 制作方案

    在之前的CSS中加上动画效果即可*/ animation: loading-360 0.8s infinite linear; /*给圆环添加旋转360度的动画，并且是无限次*/ } ?...为了让Loading动画更加生动细腻，我们还可以给svg标签也加上一个旋转动画，如: .loading-svg { width: 50px; /*设置svg显示区域大小*/ height...三、通过iconfont字体图标 我们可以直接通过iconfont字体图标代替圆环的绘制，直接以字体的形式显示出圆环，然后给其加上旋转动画即可，如： 我们可以在iconfont网站上下载喜欢的Loading...字体图标下载后，将解压后的内容拷贝到项目中，并引入其中的iconfont.css到页面中，给要显示字体图标的元素加上iconfont类样式，字体图标会有一个对应的unicode编码，通过::before...设置content为该unicode编码即可显示对应的字体图标了，或者直接在unicode码前加上\&#x，并作为元素内容。

    4.2K10

    百度地图JSAPI THREE Label 组件使用指南，轻松实现地图标签渲染

    ）支持以下值：'center'：居中'left'、'right'、'top'、'bottom'：单方向对齐'top-left'、'top-right'、'bottom-left'、'bottom-right...'：角落对齐3.3 图标样式配置参数类型默认值说明iconWidthNumber40图标宽度（像素）iconHeightNumber40图标高度（像素）mapSrcString-默认图标路径（当 vertexIcons...为 false 时使用）useIconScaleBooleanfalse是否使用图片自身的宽高比3.4 布局配置参数类型默认值说明paddingArray[2, 2]文字与图标之间的间距 [x, y]...: true, // 旋转动画 animationJump: true, // 跳跃动画 animationJumpHeight: 10, // 跳跃高度 // animationBreath...: true, // 呼吸动画 // animationScale: true, // 缩放动画}));七、事件交互Label 组件支持点击和右键点击事件：label.addEventListener

    29910

    【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

    一张 png 格式的 半透明 背景图片 , 图片大小为 747 x 617 像素 ; 使用 地图 图片 作为 div 盒子模型 的 背景图片 ; 像素 ; 同时设置 地图 背景图片 , 并设置 水平居中 ; .map { /* 盒子模型的宽高 就是 背景图片的宽高 */ width..., top 属性值为 220 像素 , left 属性值为 562 像素 ; 3、热点动画布局分析 分析 热点动画 , 发现内层的 蓝色实心 小圆圈 是不变的 , 始终都存在 ; 然后放置 2...动画实现如下 : 波纹效果动画 , 就是将 盒子模型 的大小 , 逐渐设置到 100 像素 , 中间可以设置若干动画节点 ; @keyframes bowen {..., y 轴偏移为 0 , 阴影半径 12 像素 ; 动画属性设置为 animation: bowen 1.5s linear infinite; , 使用 bowen 动画 , 持续时间 1.5 秒 ,

    1.5K20

    鸿蒙5莓创折线与柱状图legend属性详解

    String | Number 默认值：'auto' 可选值：'auto' | '10%' | 10 场景：需要精确定位图例右侧位置时使用 代码示例：legend: { right: 50 // 距离右侧50像素...| Number 默认值：'auto' 可选值：'auto' | '10%' | 10 场景：需要精确定位图例底部位置时使用 代码示例：legend: { bottom: 30 // 距离底部30像素...动画属性组10.1 animationCurve属性作用：设置图例动画曲线 类型：String 默认值：'easeOutCubic' 场景：需要自定义动画效果时使用 代码示例：legend: { animationCurve...: 'linear' // 线性动画}10.2 animationFrame属性作用：设置图例动画帧数 类型：Number 默认值：0 场景：需要控制动画流畅度时使用 代码示例：legend: { animationFrame...销售额', '利润', '增长率'], selectAble: true, animationCurve: 'easeOutQuart', animationFrame: 40}这个配置实现了：水平居中的图例圆形图标自定义的文本格式和颜色根据索引设置不同的图标颜色平滑的动画效果可交互的图例项好

    34610

    WEB入门之十九 UI

    Ø icons：用来设置每组标题的图标，子属性header用来设置分组闭合时的图标，headerSelected用来设置分组展开时的图标。...icons：用来设置按钮上的图标，子属性primary用来设置文本左边的图标，子属性 secondary用来设置文本右边的图标。 Ø label：用来设置按钮上的文本信息。...是实现对话框组件的js文件；jquery.ui.mouse.js提供了鼠标拖动对话框的支持；jquery.ui.draggable.js实现了鼠标拖动；jquery.ui.position.js提供了对话框居中显示功能...9.1 动画效果库 jQuery UI提供了一个动画效果库，它扩充了前面我们讲的动画特效函数和animate函数，实现了大量现成的动画特效，详见表9-1-3所示。...微件是jQuery提供的现成的一些页面控件，简单易用；交互行为组件主要指的是用户通过鼠标可以进行拖拽和调整大小；动画效果库提供了大量的动画样式，通过一些函数即可实现。

    2.3K10

    【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )

    , 没有任何效果 ; 执行 2 秒后 , 执行第一步 , 盒子模型变为 100 像素 ; 执行 4 秒后 , 执行结束 , 盒子模型变为 200 像素 ; 三、代码示例 - 使用动画步长实现打字机效果...---- 实现思路 : 在盒子模型中 , 设置 10 个文字 : 实现一个打字机效果吧 动画的效果是 盒子模型 从 0 到 200 像素 , 每个文字 20 像素 ;..., 动画分为 10 步 , 盒子模型每次增加 10 像素宽度 , 正好可以将动画显示出来 ; 使用 white-space: nowrap; 样式 , 可以强行将文字设置为 一行 , 使文字不换行 ;...使用 overflow: hidden; 可以隐藏 盒子模型 中 边界之外的内容 ; 设置 行高 = 高度 , 可以令文本垂直居中 ; div { width:...0px; height: 30px; /* 行高 = 高度 -> 垂直居中 */ line-height: 30px;

    1.5K40
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券