带进度条的登陆界面 – FORT.JS

简介:

今天向大家分享一个交互不错的登陆界面,请看下面的GIF动画图像,这个登陆界面和普通登陆界面的区别就是它多了一个进度条设计。当用户输入用户名、密码等操作,进度条也跟滚动,直到你把所有文章框输入完成后,进度条就会加载到100%了。

login-progress

Fort.js 插件截图

Fort.js的进度条设计简约精美,适用大部分Web端项目。目前实现了4个不同风格,你可以根据你自己的喜好来选择对应的进度条效果。

请点击下面链接查看DEMO:

  • Default | 默认风格,普通形式加载。
  • Gradient | 进度以渐变形式加载。
  • Sections | 分色块加载。
  • Flash | 渐变颜色过渡加载,具体看Demo…

Fort.js使用教程

STEP1: 外部文件加载
嵌入对应样式和js文件

<head> ... <script src="fort.min.js"></script> <link rel="stylesheet" href="fort.min.css"></head>

STEP2: HTML
这是进度条的元素。

<body> <div class="top"> <div class="colors"></div> </div>

STEP3: JS
JS指加在表单内容下面,否则不能运行。

<body> ... <script> gradient(); </script> </body>

启用对应进度条效果请参照:
Default | solid()
Gradient | gradient()
Sections | sections()
Flash | flash()

下载地址: github
目录
相关文章
用html+javascript打造公文一键排版系统1:设计界面
用html+javascript打造公文一键排版系统1:设计界面
|
3月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
197 8
|
9月前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端界面的技术探索
【5月更文挑战第20天】Vue.js是一款渐进式JavaScript框架,擅长构建交互式前端界面。其核心特性包括响应式数据绑定、组件化开发、指令系统和虚拟DOM,简化开发并提升性能。通过Vue CLI创建项目,拆分组件,结合数据绑定和事件处理实现交互,使用Vue Router管理路由,Vuex进行状态管理,能高效构建现代Web应用。
|
7月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!(一)
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!
|
9月前
|
JavaScript
当当网新用户注册界面——JS代码
当当网新用户注册界面——JS代码
|
9月前
|
移动开发 JavaScript 前端开发
分享36个JS滚动,29个JS进度条,12个JS日历代码,总有一款适合您
分享36个JS滚动,29个JS进度条,12个JS日历代码,总有一款适合您
86 0
|
9月前
|
移动开发 JavaScript 前端开发
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
148 0
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!(二)
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!
实现一个糊弄人的进度条layui+js
众所周知,进度条是一种烦人的东西╭(╯^╰)╮ 它用于实时显示处理任务的速度,完成度,剩余未完成任务量的大小,和可能需要处理时间。下面来一起写一个进度条叭

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57