转圈加载html,web前端入门到实战:纯CSS实现加载转圈样式

web前端入门到实战:纯CSS实现加载转圈样式

发布时间:2020-05-27 18:11:33

来源:51CTO

阅读:134

作者:前端向南

不同的项目中对于等待加载时转圈圈的样式是不同的,有的是传统的转圈的gif图片,见得比较多的是将转圈圈的换成了可爱的图标。有时候项目中加入等待加载的图片会很违和,不符合美观,所以需要用CSS做一个。下面是一个纯CSS实现转圈样式的例子。

2ed338a61483b2e7cb4b7f7d9322b81f.png

Document

.load-container {

background-color: #F1F1EA;

width: auto;

height: 700px;

position: relative;

overflow: hidden;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.loader {

font-size: 10px;

margin: 100px auto;

margin-top: 300px;

width: 1em;

height: 1em;

border-radius: 50%;

text-indent: -9999em;

position: relative;

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

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

相关文章

自定义view加载圆圈转圈效果

圆圈转圈效果的实现 public class LoadingView extends LinearLayout {public LoadingView(Context context) {this(context, null);}public LoadingView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public LoadingView(Context context, AttributeSe…

android酷炫转圈动画,Android 等待过程中的转圈动画

效果:(下面转圈的小圆圈) private CustomProgressDialog progressDialog; //实例化自定义CustomProgressDialog progressDialog = new CustomProgressDialog(context, R.style.progressDialog); //设置不可点击外边取消动画 progressDialog.setCanceledOnTouchOutside(false);…

超微浏览器 (uweb browser): 微、威、快、高效、极致优化

超微浏览器 (uweb browser): 微、威、快、高效、极致优化 Amazon appstore 下载 超微浏览器下载及使用技巧 (Mirrors: gitlab repo codeberg netlify stormkit surge github torapp epizy pages render bitbucket vercel) 国内可以直接使用bingChat/必应写作/chatgpt微&…

ChatGPT闲谈——火出圈的为什么是 OpenAI?

ChatGPT 走入大众视野之后,AIGC 行业迎来了爆发,尤其是上个月,仿佛每一天都可能是「历史性」的一天。 现在各大网站已经有非常多的优秀创作者进行总结和分析,都是值得一阅的好文。今天本文也分享了关于ChatGPT的看法,有…

华为版ChatGPT产品“盘古Chat”或将于7月初发布中链讯科web3mcn

中链讯科 web3mcn 中链讯科 成都老赵 中链讯科 dapp开发 中链讯科 区块链合规资管 captain嵇 中链讯科 web3基金会 四川中链讯科科技集团有限公司的成都老赵、captain嵇 等代表受邀参加了香港Web3嘉年华和币安、OKX、火币、币赢等一系列会议活动,共同探讨Web3…

Compilify Beta阶段事后分析

设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 《编译技术》是计算机学院开设的一门核心专业课程。课程参与者为教师、助教和学生。我们的编译课程平台需要提供课程管理、用户管理、课程通知…

【HelloKitty团队项目】Alpha阶段事后分析

项目内容这个作业属于哪个课程2023北航软件工程这个作业的要求在哪里团队项目-Alpha阶段事后分析我在这个课程的目标是学习软件工程技术,完成团队开发流程这个作业在哪个具体方面帮助我实现目标Alpha阶段复盘总结 设想和目标 我们的软件要解决什么问题?…

【HelloKitty团队项目】Beta阶段反思

项目内容这个作业属于哪个课程2023北航软件工程这个作业的要求在哪里团队项目-Beta阶段反思我在这个课程的目标是学习软件工程技术,完成团队开发流程这个作业在哪个具体方面帮助我实现目标Beta阶段反思总结 一、设想和目标 我们的软件要解决什么问题?是…

GISer 使用ChatGPT的姿势

ChatGPT是由OpenAI开发的一个人工智能聊天机器人程序,于2022年11月推出。该程序使用基于GPT-3.5架构的大型语言模型并通过强化学习进行训练。 作为GIS相关的工作者,我们在日常工作中该怎么使用chatgpt来提高我们的工作效率呢?接下来&#xff…

Lazada卖家上传产品实操,采采Lazada上货铺货助手,一键采集刊登上架,批量上品删除宝贝上下架更改产品属性,自动翻译,图片文字翻译

Lazada商品上传并不复杂,但是发布产品费时费力,并且经常容易出错。无论是卖家后台的单个上传还是使用csv方式批量上传,都是比较繁琐的工作,而且效率低下。那是否有比较快捷的采集方法了? 有兴趣的朋友可以了解下采采L…

商品上架-功能实现(1)

1.接口文档 2.SpuInfoController中添加spuUp方法 /*** 商品上架* param spuId* return*/PostMapping("/{spuId}/up")public R spuUp(PathVariable("spuId") Long spuId) {spuInfoService.up(spuId);return R.ok();}3.SpuInfoService中添加up方法 void up(L…

【虾皮shopee来赞达lazada】各区域商品详情API接口返回值说明

虾皮shopee电商数据(来赞达lazada同理) 虾皮(shopee)是一个亚洲区域的电商平台,主要在东南亚地区提供电商服务。虾皮提供了丰富的电商数据,包括商品数据、订单数据、会员数据、评价数据等。以下是具体的介绍: 商品数据…

虾皮Shopee商品详情接口(item_get-根据ID取商品详情)代码封装

item_get-根据ID取商品详情接口 通过代码封装该接口可以拿到商品标题,商品价格,商品促销信息,商品优惠价,商品库存,sku属性,商品图片,desc图片,desc描述,sku图片&#xf…

taobao.item.update.listing( 一口价商品上架 )

¥开放平台基础API必须用户授权 单个商品上架输入的num_iid必须属于当前会话用户 公共参数 请求地址: HTTP地址 http://gw.api.taobao.com/router/rest 公共请求参数: 请求参数 响应参数 点击获取key和secret 请求示例 TaobaoClient client new DefaultTaobaoCl…

【教程】获取实时反诈最新动态/案例

转载请注明出处:小锋学长生活大爆炸[xfxuezhang.blog.csdn.net] 请勿用于非法用途! 目录 宣传页链接 第一页帖子链接 其他页面链接 示例使用代码 想搜集会动态更新的诈骗案例,用于做反诈宣传脚本,但网上都是诈骗静态帖子&…

chatgpt赋能python:Python自动绘制轨迹:实现快速轨迹可视化的最佳工具

Python自动绘制轨迹:实现快速轨迹可视化的最佳工具 随着科技的不断发展,数据变得越来越庞大。数据处理、分析的时效性成为了一个非常重要的话题,而自动化技术也因此应运而生。Python作为一种高效且功能丰富的编程语言,可以实现许…

大神李沐、快手元老李岩被曝离职后转投大模型,ChatGPT掀起AI创业狂飙

点击上方“AI遇见机器学习”,选择“星标”公众号 重磅干货,第一时间送 来自:新智元 编辑:编辑部 【导读】在B站讲论文的李沐大神被曝出从亚马逊离职,与导师一同投身大模型创业。无独有偶,快手前AI核心人物李…

我和 chatGPT 对线操作系统!

大家都知道现在 chatGPT 已经在多个领域展现了及其强大的工地,比如文案策划,毕业论文方便,甚至很多程序员都直接让 chatGPT 帮忙写代码了,在一些模板化的代码方面,chatGPT 更展示了优秀的能力。 所以我突然迸发了一个…

AI绘图实战(九):给热门歌曲做配图 | Stable Diffusion成为设计师生产力工具

S:AI能取代设计师么? I :至少在设计行业,目前AI扮演的主要角色还是超级工具,要顶替?除非甲方对设计效果无所畏惧~~ 预先学习: 安装及其问题解决参考:《Windows安装Stable Diffusion …

QT 借助 图表 实现音频频谱的绘制

1.前言 因为项目需要,要将音频播放并且实时展现其频谱图。项目中需要解析频谱数据,涉及到相关算法问题。所以博主没有采用网络上QT用QPainter库绘制频谱,而是采用了QChart来绘制频谱。 2.效果展示 如图,红线为实时播放的位置&…