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

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

效果图:

代码实现:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C#开发上位机应用:基础与实践

C#是一种流行的面向对象编程语言&#xff0c;常用于Windows应用程序的开发。上位机应用是一种用于监控和控制设备或系统的应用程序&#xff0c;通常与下位机&#xff08;如传感器、执行器等&#xff09;进行通信。在本文中&#xff0c;我们将介绍C#开发上位机应用的基础知识和实…

人脸识别——Webface-OCC遮挡人脸识别算法解析

1. 概述 自2019年被誉为人脸识别技术的元年&#xff0c;各地纷纷引入这项技术。然而&#xff0c;自2020年起&#xff0c;为了抵御冠状病毒&#xff08;COVID-19&#xff09;的全球传播&#xff0c;人们普遍开始佩戴口罩。众所周知&#xff0c;现有人脸识别模型在面对遮挡物&am…

关于Windows中桌面窗口管理器的知识,看这篇文章就可以了

序言 你打开了任务管理器,发现了一个叫做“桌面窗口管理器”的东西,它是恶意软件吗?它应该在任务管理器吗?如果它应该在那里,它的作用什么?以下是你需要了解的所有信息。 什么是桌面窗口管理器 Desktop Window Manager(dwm.exe)是一个合成窗口管理器,可以在Windows…

【Docker|漏洞】Docker api未授权导致rce

一、漏洞描述 扫描出http://ip地址:4243漏洞&#xff0c;该漏洞可通过Docker pai未授权访问可以直接执行命令&#xff0c;获取服务器权限。 二、解决方案 禁用Docker api远程访问功能&#xff0c;或者通过安全授权等方式限制其使用权限。升级duoker至最新版本。 三、漏洞排查…

速度百倍提升,高性能 Python 编译器 Codon 火了

引言 在当下的编程世界里&#xff0c;Python由于其易用性和强大的库支持在数据科学、人工智能和网页开发等多个领域占据着举足轻重的地位。然而&#xff0c;Python的执行速度往往成为开发者的一大痛点。 针对 这一问题&#xff0c;Codon项目正试图提供一个高效的解决方案。Codo…

中科驭数驭云、超低时延网络案例双双入选第七届数字中国建设峰会数字化转型典型应用案例

5月24日-25日&#xff0c;第七届数字中国建设峰会在福州召开。在“数字赋能民营经济专业工作会议”上&#xff0c;中关村云计算产业联盟发布了《2024中小企业数字化转型典型应用案例集》&#xff0c;中科驭数驭云、超低时延网络两大方案入选。 作为国内领先的DPU芯片及解决方案…

java第十七课 —— 递归

方法递归调用 递归就是方法自己调用自己&#xff0c;每次调用时传入不同的变量&#xff0c;递归有助于编程者解决复杂问题&#xff0c;同时可以让代码变得简洁。 递归重要规则 执行一个方法时&#xff0c;就创建一个新的受保护的独立空间&#xff08;栈空间&#xff09;。方…

【openlayers系统学习】3.3假彩色图像合成(三个波段合成假彩色图像)

三、假彩色图像合成 在上一步中&#xff0c;我们使用 ol/source/GeoTIFF​ 源从单个多波段源&#xff08;具有红色、绿色、蓝色和Alpha波段&#xff09;渲染真彩色图像。在下面这个例子中&#xff0c;我们将从可见光谱之外提取数据&#xff0c;并使用它来呈现假彩色合成。 我…

快消终端门店真实性新玩法:全流程校验+多元认证多重保障

在某饮品企业会议室&#xff0c;气氛凝重。城市经理一脸严肃地扫视着团队成员&#xff0c;小李、小张和小陈等人在这锐利的目光下显得有些局促不安。 城市经理沉声开口&#xff1a;小李上报的“幸福超市”’新店在XX大街上并不存在。这是怎么回事&#xff1f; 小李支吾着回答…

javaIO流知识点概况

一、前言&#xff1a; 1.1.流的概念: java将输入与输出比喻为"流"&#xff0c;英文:Stream. 就像生活中的"电流","水流"一样,它是以同一个方向顺序移动的过程.只不过这里流动的是字节(2进制数据).所以在IO中有输入流和输出流之分,我们理解他们…

【RabbitMQ】使用SpringAMQP的Publish/Subscribe(发布/订阅)

Publish/Subscribe **发布(Publish)、订阅(Subscribe)&#xff1a;**允许将同一个消息发送给多个消费者 **注意&#xff1a;**exchange负责消息路由&#xff0c;而不是存储&#xff0c;路由失败则消息丢失 常见的**X(exchange–交换机)***类型&#xff1a; Fanout 广播Direc…

SPP/BLE蓝牙双模方案,主从一体,串口速率可达85KB/S

MS-BTD020A是一款蓝牙5.0双模数传模块&#xff0c;支持SPP&#xff08;经典蓝牙&#xff09;和BLE&#xff08;低功耗蓝牙&#xff09;。蓝牙双模技术使其能够在传统蓝牙和低功耗蓝牙之间无缝切换&#xff0c;用户只需要进行简单的设置就可以实现串口与手机之间的无线传输。模块…

【每日一坑】KiCAD 覆铜区域约束

【每日一坑】 1.螺丝孔周围不想要要铜皮&#xff1b; 2、首先在CTRLshiftK;画一个区域&#xff0c;比如铺一个GND; 3、选择CUTOUT; 4、画线&#xff0c;画好闭合图形&#xff1b;如下图 5、就是这样了&#xff0c;就是还没有画圆或者异形的&#xff1b;

Scikit-Learn随机森林

Scikit-Learn随机森林 1、随机森林1.1、集成学习1.2、Bagging方法1.3、随机森林算法1.4、随机森林的优缺点2、Scikit-Learn随机森林回归2.1、Scikit-Learn随机森林回归API2.2、随机森林回归实践(加州房价预测)1、随机森林 随机森林是一种由决策树构成的集成算法,它在大多情况…

香橙派 AiPro通过Micro USB接口进行串口调试

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、配置步骤1.安装CH343驱动2.配置串口参数 二、使用步骤总结 前言 最近在玩一个新玩具香橙派 AiPro&#xff0c;除了通过SSH方式连接开发板以外&#xff0c;…

Llama模型家族训练奖励模型Reward Model技术及代码实战(二)从用户反馈构建比较数据集

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

设计模式:外观模式 导诊台。空指针异常

文章目录 UML类图目录结构思路Register.javaOutpatientService.javaPrice.javaPharmacy.javaFacade.java空指针异常 Test.java UML类图 目录结构 思路 照着写&#xff0c;然后getRegister&#xff08;&#xff09;方法的具体实现就是&#xff1a;打印一句话&#xff0c;然后到…

服务器端口查询:一项至关重要的网络管理任务

在网络管理和系统维护中&#xff0c;服务器端口查询是一项至关重要的任务。服务器端口是网络通信的入口点&#xff0c;它们允许各种服务和应用程序在网络上进行交互。因此&#xff0c;准确而有效地查询服务器端口的状态和配置对于确保网络的安全性和稳定性至关重要。 首先&…

floodfill 算法(上)

目录 图像渲染 题意&#xff1a; 题解&#xff1a; 非递归&#xff1a; 递归&#xff1a; 岛屿数量 题解&#xff1a; 非递归&#xff1a; 递归&#xff1a; 岛屿的最大面积 题解&#xff1a; 非递归&#xff1a; 递归&#xff1a; 被围绕的区域 题解&#xff1a…

10G SFP双口万兆以太网控制器,高速光口网络接口卡

2-Port 10G SFP NIC 是一款高速网 络接口卡&#xff0c;采用了 PCI Express 3.0 x8 接口&#xff0c;支持双 端口万兆以太网&#xff0c;具有高性能、高可靠性、低功耗等 优点&#xff0c;是数据中心、云计算、虚拟化等领域的理想选 择。 支持多种网络协议&#xff0c;如 …