前端 CSS 经典:水波进度样式

前言:简单实现水波进度样式,简单好看。

效果图:

代码实现:

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>body {background: #000;}.indicator {display: flex;align-items: center;justify-content: center;font-size: 3em;margin: 200px auto;width: 100px;height: 100px;border-radius: 50%;border: 2px solid #fff;position: relative;overflow: hidden;color: #fff;}.indicator span {position: absolute;z-index: 999;}.indicator::after {content: "";width: 200px;height: 200px;border-radius: 60px;position: absolute;left: -50%;top: 50px;background: blue;animation: rotate 5s linear 0s infinite;}@keyframes rotate {from {transform: rotateZ(0deg);}to {transform: rotateZ(359deg);}}</style></head><body><div><div class="indicator"><span>50</span></div></div><script></script></body>
</html>

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

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

相关文章

《数学学习与研究》杂志是什么级别?知网收录吗?评职认可吗?

《数学学习与研究》杂志是什么级别&#xff1f;知网收录吗&#xff1f;评职认可吗&#xff1f; 《数学学习与研究》是由东北师范大学主管&#xff0c;吉林省数学会与东北师范大学出版社联合主办的省级优秀数学类期刊杂志。该杂志为半月刊&#xff0c;国际标准刊号为 ISSN1007-…

SkyWalking之P0业务场景输出调用链路应用

延伸扩展&#xff1a;XX业务场景 路由标签打标、传播、检索 链路标签染色与传播 SW: SkyWalking的简写 用户请求携带HTTP头信息X-sw8-correlation “X-sw8-correlation: key1value1,key2value2,key3value3” 网关侧读取解析HTTP头信息X-sw8-correlation&#xff0c;然后通过SW…

【Linux】系统优化:一键切换软件源与安装Docker

引言 在Linux系统安装完成后&#xff0c;进行一些必要的初始化设置是提升系统性能和用户体验的关键。本文将重点介绍两个实用的一键脚本&#xff1a;LinuxMirrors提供的软件源切换脚本和Docker安装脚本。这两个脚本将帮助我们简化配置安装过程。 一键切换软件源脚本 在Linux…

AI绘画如何打造高质量数据集?

遇到难题不要怕&#xff01;厚德提问大佬答&#xff01; 厚德提问大佬答11 你是否对AI绘画感兴趣却无从下手&#xff1f;是否有很多疑问却苦于没有大佬解答带你飞&#xff1f;从此刻开始这些问题都将迎刃而解&#xff01;你感兴趣的话题&#xff0c;厚德云替你问&#xff0c;你…

数据动态变化时实现多选及回显

<template><el-dialog title"设置权限" :visible.sync"showDialog" :close-on-click-modal"false" :append-to-body"true" width"800px"><div v-loading"loading"><el-radio-group v-model&…

【论文阅读】MODELING AND SOLVING THE TRAVELING SALESMAN PROBLEM WITH PRIORITY PRIZES

文章目录 论文基本信息摘要1.引言2. INTEGER QUADRATIC PROGRAM FOR TSPPP3. MIXED INTEGER LINEAR PROGRAMS FOR TSPPP4. TABU SEARCH ALGORITHM FOR TSPPP5. COMPUTATIONAL RESULTS6. CONCLUDING REMARKS补充 论文基本信息 《MODELING AND SOLVING THE TRAVELING SALESMAN P…

SQL语句练习每日5题(四)

题目1——查找GPA最高值 想要知道复旦大学学生gpa最高值是多少&#xff0c;请你取出相应数据 题解&#xff1a; 1、使用MAX select MAX(gpa) FROM user_profile WHERE university 复旦大学 2、使用降序排序组合limit select gpa FROM user_profile WHERE university 复…

【vuex小试牛刀】

了解vuex核心概念请移步 https://vuex.vuejs.org/zh/ # 一、初始vuex # 1.1 vuex是什么 就是把需要共享的变量全部存储在一个对象里面&#xff0c;然后将这个对象放在顶层组件中供其他组件使用 父子组件通信时&#xff0c;我们通常会采用 props emit 这种方式。但当通信双方不…

如何搭建一台永久运行的个人服务器?

一、前言 由于本人在这段时候&#xff0c;看到了一个叫做树莓派的东东&#xff0c;初步了解之后觉得很有意思&#xff0c;于是想把整个过程记录下来。 二、树莓派是什么&#xff1f; Raspberry Pi(中文名为树莓派,简写为RPi&#xff0c;(或者RasPi / RPI) 是为学习计算机编程…

38页 | 工商银行大数据平台助力全行数字化转型之路(免费下载)

【1】关注本公众号&#xff0c;转发当前文章到微信朋友圈 【2】私信发送 工商银行大数据平台 【3】获取本方案PDF下载链接&#xff0c;直接下载即可。 如需下载本方案PPT/WORD原格式&#xff0c;请加入微信扫描以下方案驿站知识星球&#xff0c;获取上万份PPT/WORD解决方案&a…

LlamIndex二 RAG应用开发

在AutoGen)系列后&#xff0c;我又开始了LlamIndex 系列。欢迎查询LlamaIndex 一 简单文档查询 - 掘金 (juejin.cn)了解LlamIndex&#xff0c;今天我们来看看LlamIndex的拿手戏&#xff0c;RAG应用开发。 何为RAG&#xff1f; RAG全称"Retrieval-Augmented Generation&q…

Linux C语言:指针和指针变量

一、指针的作用 使程序简洁、紧凑、高效有效地表示复杂的数据结构动态分配内存能直接访问硬件能够方便的处理字符串得到多于一个的函数返回值 二、内存、地址和变量 1、内存地址 2、变量和地址 1&#xff09;变量用来在程序中保存数据 比如: int k 58; //声明一个int变…

jupyter notebook默认工作目录修改

jupyter notebook默认工作目录修改 1、问题2、如何修改jupyter notebook默认工作目录 1、问题 anaconda安装好之后&#xff0c;我们启动jupyter notebook会发现其默认工作目录是在C盘&#xff0c;将工作目录放在C盘会让C盘很快被撑爆&#xff0c;我们应该将jupyter notebook默…

QT系列教程(8) QT 布局学习

简介 Qt 中的布局有三种方式&#xff0c;水平布局&#xff0c;垂直布局&#xff0c;栅格布局。 通过ui设置布局 我们先创建一个窗口应用程序&#xff0c;程序名叫layout&#xff0c;基类选择QMainWindow。但我们不使用这个mainwindow&#xff0c;我们创建一个Qt应用程序类Log…

MYTED | TED100篇打卡总结 辅助学习网站使用说明

文章目录 &#x1f4da;背景&#x1f407;timeline&#x1f407;版本记录&#x1f407;产出小结 &#x1f4da;功能说明&#x1f407;左侧&#x1f407;中间&#x1f407;右侧 &#x1f4da;背景 &#x1f407;timeline 在一个平常的下午&#xff0c;一次平常的桌面整理&#…

Python 机器学习 基础 之 处理文本数据 【处理文本数据/用字符串表示数据类型/将文本数据表示为词袋】的简单说明

Python 机器学习 基础 之 处理文本数据 【处理文本数据/用字符串表示数据类型/将文本数据表示为词袋】的简单说明 目录 Python 机器学习 基础 之 处理文本数据 【处理文本数据/用字符串表示数据类型/将文本数据表示为词袋】的简单说明 一、简单介绍 二、处理文本数据 三、用…

ts类型声明文件、内置声明文件

1. ts类型声明文件 在ts中以d.ts为后缀的文件就是类型声明文件&#xff0c;主要作用是为js模块提供类型信息支持&#xff0c;从而获得类型提示 1.1 第三方包用ts编写的&#xff0c;会自动生成一个 .d.ts文件&#xff0c;进行类型声明 1.2 有些包不是用ts编写的&#xff0c;在…

图的相关种类

目录 数据类型 存储结构 邻接矩阵表示法 无向图 邻接矩阵表示 有向图 网 实现 邻接矩阵表示 存储结构 创建无向图 优点 缺点 邻接表法表示 表示无向图 表示有向图 存储结构 无向网 特点 十字链表与多重表 十字链表 存储结构 多重表 存储结构 数据类型 存…

【Unity3D小功能】Unity3D中UGUI-Text实现打字机效果

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址QQ群&#xff1a;398291828 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 需求要实现Text的打字机效果&#xff0c;一看居然…

关于stm32的复用和重映射问题

目录 需求IO口的复用和重映射使用复用复用加重映射 总结参考资料 需求 一开始使用stm32c8t6&#xff0c;想实现pwm输出&#xff0c;但是原电路固定在芯片的引脚PB10和PB11上&#xff0c;查看了下引脚的功能&#xff0c;需要使用到复用功能。让改引脚作为定时器PWM的输出IO口。…