实现的的效果图如下：效果是动态加载的

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
//为了将效果图移到屏幕中间的盒子
.box{
width: 200px;
margin: 50px auto;
}
//包含进度条和圆圈的盒子
.line {
border-radius: 10px;
height: 10px;
margin-top: 6px;
animation: loader 3s linear;
position: relative;
}
//有背景色的进度条
.line_in {
border-radius: 10px;
height: 5px;
margin-top: 6px;
}
//进度条前面的圆圈
.circle {
position: absolute;
top: -2px;
right: 0px;
width: 10px;
height: 10px;
border-radius: 50%;
}
//背景色实现渐变
.green {
background-image: linear-gradient(
-45deg,
rgba(99, 193, 111, 1) 0%,
rgba(20, 157, 37, 1) 25%,
rgba(99, 193, 111, 1) 50%,
rgba(20, 157, 37, 1) 75%,
rgba(99, 193, 111, 1) 100%
);
}

//进度条能动态加载的动画

@keyframes loader {
0% {width: 0%;}
100% { width: 80%;}
}
</style>
</head>
<body>
<div class="box">
   <div class="line" style="width:80%">
       <div class="line_in green"></div>
       <div class="circle green"></div>
   </div>
</div>
<script src="./js/jquery/jquery.min.js"></script>
</body>
</html>
 

超简单CSS3水平动态进度条+小圆球+背景色渐变的更多相关文章

  1. Winfrom 简单的进度条小程序

    使用Winform空间编写简单的进度条小程序: 所需控件:Lable 标签  TextBox  文本框  progressBar  进度条控件  timer 定时器 下面是源码及效果图: /// &l ...

  2. Qt实现炫酷启动图-动态进度条

    目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 ...

  3. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  4. css3实现不同进度条

    进度条类型1(渐变进度条) 效果1:图片实现进度条 思路,进度条是一张图片,用定位来控制不同时间图片相对进度条box的left值来控制位置,用animate实现动画效果 html <div cl ...

  5. bootstrap得动态进度条

    Bootstrap的动态进度条: html: 创建一个modal   这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 <div class=" ...

  6. CSS3实现圆环进度条

    摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...

  7. CSS3时钟式进度条

    CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度.友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了:实际使用中不会出现这样的问题. <!DOCT ...

  8. 【JavaScript】HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

  9. HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

随机推荐

  1. 谈谈localhost与127.0.0.1

    localhost意为本地主机,指这台计算机,是给回路网络接口的标准主机名,对应的IP地址为127.0.0.1,可访问本地服务器的web项目(http://localhost). 那么它们有什么区别呢 ...

  2. 一步一步学Vue（五）

    本篇是是vue路由的开篇,会以一个简单的demo对vue-router进行一个介绍,主要覆盖以下几个常用场景: 1.路由跳转 2.嵌套路由 3.路由参数 1.Vue-Router 一般来说,路由定义就 ...

  3. python函数（2）：函数进阶

    昨天说了函数的一些最基本的定义,今天我们继续研究函数.今天主要研究的是函数的命名空间.作用域.函数名的本质.闭包等等 预习: 1.写函数,用户传入修改的文件名,与要修改的内容,执行函数,完成整个文件的 ...

  4. 【Django】django 的request和response（转）

    当请求一个页面时,Django 把请求的 metadata 数据包装成一个 HttpRequest 对象,然后 Django 加载合适的 view 方法,把这个 HttpRequest 对象作为第一个 ...

  5. Linux安装搜狗输入法教程

    最近开始学习linux 在安装输入法中遇到的一些问题,最终成功安装,也得益于网络上的前辈写的文章,现在将全部安装步骤以及遇到的一些问题总结如下:   基本上分三步走 1,添加fcitx的键盘输入法系统 ...

  6. hadoop系列三:mapreduce的使用(一)

    转载请在页首明显处注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/7224772.html 一:说明 此为大数据系列的一些博文,有空的话会陆续更新,包含大数据的 ...

  7. perl的安装和版本切换工具-perlbrew

    setenv PERL /opt/perl5 --设置新perl的起始安装路径 curl -kL http://install.perlbrew.pl | bash source /opt/perl5 ...

  8. Python爬虫从入门到放弃（二十）之 Scrapy分布式原理

    关于Scrapy工作流程回顾 Scrapy单机架构 上图的架构其实就是一种单机架构,只在本机维护一个爬取队列,Scheduler进行调度,而要实现多态服务器共同爬取数据关键就是共享爬取队列. 分布式架 ...

  9. solr6.5 的安装与配置

    运行环境: JDK:    1.8.0_131 Tomcat: 9.0.0.M21 Solr:      6.5.1 注:1.建议打开两个连接linux的窗口,一个负责 solr压缩目录,另外一个负责 ...

  10. <Mastering KVM Virtualization>：第二章 KVM内部原理

    在本章中,我们将讨论libvirt.QEMU和KVM的重要数据结构和内部实现.然后,我们将深入了解KVM下vCPU的执行流程. 在这一章,我们将讨论: libvirt.QEMU和KVM的内部运作方式. ...