Bootstrap的旋转器组件

旋转效果可以用来指示状态,比如页面的加载状态。

可以用类spinner-border实现普通旋转的旋转器效果。
用类spinner-grow实现渐渐变大的旋转器效果。

01-最基本的示例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>旋转器颜色</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3>第一种旋转器</h3>
<div class="spinner-border"></div>
<h3>第二种旋转器</h3>
<div class="spinner-grow"></div>
</body>
</html>

运行效果如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

02-设置旋转器的颜色

示例代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>旋转器颜色</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3>旋转器颜色</h3>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-light"></div>
<div class="spinner-border text-dark"></div>
<br/>
<br/>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-light"></div>
<div class="spinner-grow text-dark"></div>
</body>
</html>

运行效果如下:
在这里插入图片描述

03-设置旋转器的大小

示例代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>设置旋转器的大小</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">小的旋转器</h3>
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm  ml-5"></div><hr/>
<h2 align="center">大的旋转器</h2>
<div class="spinner-border" style="width: 3rem; height: 3rem;"></div>
<div class="spinner-grow ml-5" style="width: 3rem; height: 3rem;"></div>
</body>
</html>

运行效果如下:
在这里插入图片描述

04-设置旋转器的对齐方式

略…

05-把旋转器放在按钮中

示例代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>按钮旋转器</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">按钮旋转器</h3>
<button class="btn btn-danger" type="button" disabled><span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-danger" type="button" disabled><span class="spinner-border spinner-border-sm"></span>Loading...
</button><hr/>
<button class="btn btn-success" type="button" disabled><span class="spinner-grow spinner-grow-sm"></span>
</button>
<button class="btn btn-success" type="button" disabled><span class="spinner-grow spinner-grow-sm"></span>Loading...
</button>
</body>
</html>

运行效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/167945.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

当年很流行,现在已经淘汰的前端技术有哪些?

近几年&#xff0c;前端技术真可谓是飞速发展&#xff0c;不断有新的技术涌现&#xff0c;爆火的前端框架 Astro&#xff0c;前端运行时 Bun&#xff0c;构建工具 Vite 等都给前端提供了强大动力。当然&#xff0c;也有很多前端技术随着技术的发展不再需要使用&#xff0c;有了…

博客续更(五)

十一、后台模块-菜单列表 菜单指的是权限菜单&#xff0c;也就是一堆权限字符串 1. 查询菜单 1.1 接口分析 需要展示菜单列表&#xff0c;不需要分页。可以针对菜单名进行模糊查询。也可以针对菜单的状态进行查询。菜单要按照父菜单id和orderNum进行排序 请求方式 请求路径…

python输出小数控制的方法

大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 如果有什么疑惑/资料需要的可以点击文章末尾名片领取源码 一、要求较小的精度 将精度高的浮点数转换成精度低的浮点数。 1.round()内置方法 round()不是简单的四舍五入的处理方式。 >>> round(2.5) 2 >>> ro…

Python树莓派开发

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

【漏洞复现】蓝凌EIS智慧协同平台saveImg接口存在任意文件上传

漏洞描述 蓝凌智慧协同平台满足组织企业在知识、协同及项目管理系统中建设等需求。该平台在saveImg接口处存在任意文件上传,攻击者可通过该漏洞上传Weshell控制服务器。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,…

VM虚拟机创建centos7 64位系统提示此主机不支持64位客户机操作系统,此系统无法运行

VM虚拟机创建centos7 64位系统提示此主机不支持64位客户机操作系统,此系统无法运行 背景解决方案 背景 本身系统是window10 64位专业版系统&#xff0c;理论上不应该不支持64位的。 解决方案 最近安装docker开启了虚拟化hyper-v&#xff0c;关闭即可。 打开cmd&#xff08;…

VLAN互通

文章目录 VLAN互通2种方法单臂路由实现VLAN互通TOP图配置-LSW配置-Router1测试&#xff1a;PC1PC2 VLANIF(更受欢迎)TOP图LSW2配置测试PC1 VLAN互通2种方法 单臂路由实现VLAN互通 TOP图 名称IPGatewayPC1192.168.1.1/24192.168.1.254PC2192.168.2.1/24192.168.2.254 名称VLA…

测试老鸟总结,Allure测试报告-自动化测试详解,惊险避坑...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Allure安装教程…

Java 8 新特性 Ⅱ

方法引用 举例: Integer :: compare 理解: 可以看作是基于lambda表达式的进一步简化 当需要提供一个函数式接口的实例时, 可以使用lambda表达式提供实例 当满足一定条件下, 可以使用方法引用or构造器引用替换lambda表达式 实质: 方法引用作为函数式接口的实例 (注: 需要熟悉…

Promise笔记-同步回调-异步回调-JS中的异常error处理-Promis的理解和使用-基本使用-链式调用-七个关键问题

Promise笔记 1. 预备知识1.1 实例对象与函数对象1.2 两种类型的回调函数1. 同步回调2. 异步回调 1.3 JS中的异常error处理1. 错误的类型2. 错误处理&#xff08;捕获与抛出&#xff09;3. 错误对象 2.Promise的理解和使用2.1 Promise是什么1.理解Promise2.Promise 的状态3. Pro…

内衣洗衣机有必要买吗?口碑好的小型洗衣机测评

在近年以来&#xff0c;由于人们对健康的认识和生活质量的不断改善&#xff0c;使得内衣洗衣机这一类的产品在近年来得到了飞速的发展&#xff0c;洗烘一体机、洗烘套装的价格总体下降&#xff0c;功能和性能都得到了改善&#xff0c;往往更多的用户会选择一台或者多台洗衣机来…

面向对象设计原则之接口隔离原则

目录 定义接口隔离原则与单一职责原则示例 定义 接口隔离原则&#xff0c;全称为 Interface Segregation Principle&#xff0c;缩写ISP。 原始定义&#xff1a;Clients should not be forced to depend upon interfaces that they don’t use。 翻译&#xff1a; 不应该强行…

【Maven教程】(八):使用 Nexus 创建私服 ~

Maven 使用 Nexus 创建私服 1️⃣ Nexus简介2️⃣ 安装 Nexus2.1 下载 Nexus2.2 Bundle 方式安装 Nexus2.3 WAR 方式安装 Nexus2.4 登录 Nexus 3️⃣ Nexus 的仓库与仓库组3.1 Nexus 内置的仓库3.2 Nexus 仓库分类的概念3.3 创建 Nexus 宿主仓库3.4 创建 Nexus 代理仓库3.5 创…

CUDA学习笔记(十一)Memory Access

转载于https://www.cnblogs.com/1024incn/tag/CUDA/ Memory Access Patterns 大部分device一开始从global Memory获取数据&#xff0c;而且&#xff0c;大部分GPU应用表现会被带宽限制。因此最大化应用对global Memory带宽的使用时获取高性能的第一步。也就是说&#xff0c;gl…

OSI网络分层模型

OSI英文全文是Open System Interconnection Reference Model&#xff0c;翻译成中文就是开放式系统互联通信参考模型。 OSI模型分成了七层&#xff0c;部分层次与 TCP/IP 很像&#xff0c;从下到上分别是&#xff1a; 第一层&#xff1a;物理层&#xff0c;网络的物理形式&…

浏览器从输入url到渲染页面发生了什么?

浏览器从输入url到渲染页面发生了什么&#xff1f; 一、解析URL 首先浏览器做的第一步工作就是要对 URL 进行解析&#xff0c;浏览器会判断这个url的合法性 &#xff0c;以及是否有可用缓存&#xff08;如果有缓存即可以不用进行下一步的DNS域名解析&#xff09;&#xff0c;…

iOS原生、Android 原生, flutter 三种方式给照片流添加文字(水印)

效果图:三中代码实现的效果差不多 Swift:代码 import UIKitclass ImageWatermarking: NSObject {static func textToImage(drawText text: String, inImage initImage: UIImage, atPoint point: CGPoint) -> UIImage {let textColor = UIColor.whitelet textFont = UIFon…

@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)

目录 一、RequestMapping 路由映射 二、参数传递 1、传递单个参数 2、传递多个参数 3、传递对象 4、后端参数重命名 一、RequestMapping 路由映射 指定请求访问的路径既可以修饰类&#xff0c;又可以修饰方法 RequestMapping支持Get、Post、Delete等多种请求方式 Re…

【JavaScript】深入讲解浏览器渲染原理

一. 浏览器是如何渲染页面的&#xff1f; 当浏览器的网络线程收到 HTML 文档后&#xff0c;会产生一个渲染任务&#xff0c;并将其传递给渲染主线程的消息队列。 在事件循环机制的作用下&#xff0c;渲染主线程取出消息队列中的渲染任务&#xff0c;开启渲染流程。 渲染&…