進度條製作-固定在頂部

阿新 • • 發佈：2018-11-15

進度條製作

一、思路分析

對於固定在頂部的 loading 動畫，我們採用的方式動態改變標籤的寬度來實現動畫效果，在頁面載入一部分後，改變寬度，當載入完畢時，隱藏對應的標籤。

二、頁面佈局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>進度條動畫製作</title>
		<link rel="stylesheet" type="text/css" href="css/index3.css" /> 

		<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="loading">
			<div class="picture"></div>
		</div>
		<!-- 注意：以下結構僅僅是為了演示頁面而已 -->
		<div class="container">
			< 
div class="item">
				<img src="http://pic1.win4000.com/wallpaper/2018-01-06/5a50674a7b626.jpg">
			</div>
			<div class="item">
				<img src="http://img2.imgtn.bdimg.com/it/u=2398464402,4254570216&fm=11&gp=0.jpg">
			</div>
			<div class="item">
				<img src="http://i0.hdslb.com/bfs/article/669b74844e47c4ca9774aad43dc62b0d879fbcd6.jpg" 
>
			</div>
			<div class="item">
				<img src="http://pic1.win4000.com/wallpaper/2018-06-08/5b1a448a79175.jpg">
			</div>
		</div>
		<script type="text/javascript">
			$(".loading .picture").animate({
				width: "20%"
			}, 100);
		</script>
		<div class="container">
			<div class="item">
				<img src="http://img0.imgtn.bdimg.com/it/u=228361023,682353921&fm=26&gp=0.jpg">
			</div>
			<div class="item">
				<img src="http://img5.imgtn.bdimg.com/it/u=550633143,1906543664&fm=11&gp=0.jpg">
			</div>
			<div class="item">
				<img src="http://www.wallcoo.com/flower/digital_flower_jp_03/wallpapers/1680x1050/wallcoo.com_Digital_Flower_Photo_321.jpg">
			</div>
			<div class="item">
				<img src="http://www.wallcoo.com/nature/2009_Landscape_1680_Desktop_04/wallpapers/1680x1050/Rising%20Mist%20at%20Dawn.jpg">
			</div>
		</div>
		<script type="text/javascript">
			$(".loading .picture").animate({
				width: "40%"
			}, 100);
		</script>
		<div class="container">
			<div class="item">
				<img src="http://www.wallcoo.com/photograph/Fresh%20Vegetables%20by%20Isabelle%20Rozenbaum/wallpapers/1440x900/Bunch%20of%20radishes%2C%20close-up.jpg">
			</div>
			<div class="item">
				<img src="http://img2.niutuku.com/desk/1208/2044/ntk-2044-14905.jpg">
			</div>
			<div class="item">
				<img src="http://www.wallcoo.com/cartoon/Semafore_Calendar_Project_1920/wallpapers/1280x800/Calendar_Design_2003.04.jpg">
			</div>
			<div class="item">
				<img src="http://www.wallcoo.com/cartoon/future_tech_background/wallpapers/1680x1050/%5Bwallcoo_com%5D_3516_future_TECH_Image.jpg">
			</div>
		</div>
		<script type="text/javascript">
			$(".loading .picture").animate({
				width: "60%"
			}, 100);
		</script>
		<div class="container">
			<div class="item">
				<img src="http://i1.3conline.com/images/piclib/201305/20/batch/1/176010/13690210721960gaa56pug9.jpg">
			</div>
			<div class="item">
				<img src="http://img2.niutuku.com/desk/1207/1030/ntk119230.jpg">
			</div>
			<div class="item">
				<img src="http://img2.niutuku.com/desk/1207/1041/ntk120340.jpg">
			</div>
			<div class="item">
				<img src="http://g.hiphotos.baidu.com/zhidao/pic/item/6a600c338744ebf814066acedbf9d72a6159a7cf.jpg">
			</div>
		</div>
		<script type="text/javascript">
			$(".loading .picture").animate({
				width: "80%"
			}, 100);
		</script>
		<div class="container">
			<div class="item">
				<img src="http://pic1.win4000.com/wallpaper/3/510b709821ec1.jpg">
			</div>
			<div class="item">
				<img src="http://download.firefox.com.cn/gfox/wallpaper/2013/06/1920x1200.jpg">
			</div>
			<div class="item">
				<img src="http://pic9.nipic.com/20100825/668573_135507057246_2.jpg">
			</div>
			<div class="item">
				<img src="http://pic1.win4000.com/wallpaper/a/51f1e196b5576.jpg">
			</div>
		</div>
		<script type="text/javascript">
			$(".loading .picture").animate({
				width: "100%"
			}, 100, function() {
				$('.loading').fadeOut();
			})
		</script>
	</body>
</html>

三、樣式

* {
	margin: 0;
	padding: 0;
}
/* 載入動畫樣式start */
.loading {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background: #ffffff;
}
.loading .picture {
	position: absolute;
	top: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: 6px;
	background: blue;
	border-radius: 3px;
}
/* 載入動畫樣式end */

/* 頁面樣式start */
.container {
	width: 1200px;
	margin: 10px auto;
	border: 1px solid red;
	padding: 20px;
	overflow: hidden;
	border-radius: 10px;
}

.container .item {
	float: left;
	margin-bottom: 10px;
}

.container img {
	font-size: 0;
	vertical-align: middle;
	width: 300px;
	height: 200px;
}
/* 頁面樣式end */

四、溫馨提示

每當頁面載入一部分，便改變 loading 的寬度，載入完畢後，隱藏標籤。

// 載入到80%
<script type="text/javascript">
	$(".loading .picture").animate({ width: "80%" }, 100);
</script>
// 載入完畢
<script type="text/javascript">
	$(".loading .picture").animate({ width: "100%"}, 100, function() {
		$('.loading').fadeOut();
	})
</script>

五、效果圖

固定在頂部

進度條製作-固定在頂部

進度條製作一、思路分析對於固定在頂部的 loading 動畫，我們採用的方式動態改變標籤的寬度來實現動畫效果，在頁面載入一部分後，改變寬度，當載入完畢時，隱藏對應的標籤。二、頁面佈局 <!DOCTYPE html> <html>

進度條製作-百分比形式

百分比形式進度條 1、思路分析首先，獲取頁面中的所有 img 標籤，並進行遍歷，對 img 標籤的 src 屬性賦值。根據遍歷的圖片的數量，計算對應的百分比，改變 span 標籤中的數字。當遍歷全部之後，隱藏對應的標籤。二、

進度條製作-CSS動畫

溫馨提示程式碼參考 [本人部落格]：【https://blog.csdn.net/qq_41115965/article/details/83713343】程式碼修改不同於使用 GIF 圖片，使用 CSS3 動畫的時候 loading 佈局，應做以下改變:

進度條製作-GIF動畫

網頁進度條製作一、為什麼需要網頁進度條隨著HTML的普及，各種CSS3動畫及特效在網頁中層出不窮，PC端載入資料的速度還算可以，移動端相對要慢很多，如果圖片或指令碼沒有完全載入，使用者在操作中可能發生各種問題，因此我們需要對載入資料進行檢測，以更加人性化的方式給使用者展現。

進度條製作

簡單描述一下小例子：這個進度條是可以通過js控制的，即點選按鈕觸發函式，動態的改變百分比的值與進度條的狀態。當超過100%時，不再響應，按鈕禁用。 html部分： <div class="progress-bar"> <div class='bo

Unity3D非同步載入的進度條製作

Unity3D非同步載入場景的場景進度條的製作 01.菜鳥一些 using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.

NGUI 圓形血條、進度條製作

通常，為了美化介面佈局，進度條或者角色血條、經驗條並不是長方形的，可能會是個圓形，看了下別人的製作過程都稍顯複雜，為此整理了一份步驟非常簡單的製作圓形進度條或者圓形血條、經驗條的方法。這兒我們使用了一個遮罩 Shader，原文連結地址如下：http://gam

純CSS3進度條製作-Pure CSS3 Progress Bar

1.效果分析純CSS3實現進度條的製作，效果如下圖所示，詳見----demo---- 2.難點分析圓角邊框，內陰影，漸變填充實現斜紋效果斜紋動畫 3.實現步驟 a.html架構 <d

瀏覽器頂部進度條

pro done star outer next 進度條 tar html 頂部 1、安裝 npm install --save nprogress 2、在main.js中引入 import NProgress from "nprogress" import "nprog

143行js頂部進度條最小插件-nanobar.js源碼解析

lse commonj 接受定義 end 元素 fine round 網頁網頁頂部進度條插件的有四五種，基本原理就是動態地創建一個元素，然後通過設置它的width來實現動畫效果，width增長到達指定位置時，將其去掉。來看看nanobar.js作者jacoborus是怎

圖解CSS3製作圓環形進度條的例項教程

圓環形進度條製作的基本思想還是畫出基本的弧線圖形,然後CSS3中我們可以控制其旋轉來串聯基本圖形,製造出部分消失的效果,下面就來帶大家學習圖解CSS3製作圓環形進度條的例項教程首先，當有人說你能不能做一個圓形進度條效果出來時，如果是靜態完整圓形進度條，那麼就很簡單

詳解用CSS3製作圓形滾動進度條的動畫效果

今天手把手教大家用CSS3製作圓形滾動進度條動畫！先看一下效果圖，會提升我們的學習興趣喲：第一種效果： html結構： <div id="progress"> <span></span> </div>

Java製作進度條

import java.awt.Color; import java.awt.Toolkit; import javax.swing.ImageIcon; import javax.swing.JLabel; import javax.swing.JOptionPane; import javax.

vue自定義進度條的製作方法（含css屬性值的兩種動態改變方式）

雛形部分接上一篇文章：https://blog.csdn.net/ColourfulTiger/article/details/82910505 結合vue製作自定義的進度條，優勢在於採用了vue特有的樣式繫結，與雙向繫結的方法，達到資料與進度條的進度一致。突破點：通過變數來動態改變屬性對

Python網路爬蟲之製作股票資料定向爬蟲以及爬取的優化可以顯示進度條！

候選網站：新浪股票：http://finance.sina.com.cn/stock/ 百度股票：https://gupiao.baidu.com/stock/ 選取原則：無robots協議非js網頁資料在HTMLK頁面中的 F12，檢視原始

Unity3D之UGUI——製作非同步載入場景進度條

製作遊戲經常要實現兩個場景的切換，但由於載入場景需要一定時間，所以為了優化玩家體驗，在第一個場景中製作一個進度條顯示載入進度。現在就在unity中實現，go go!開啟unity,新建場景 GameMai

Python中製作帶數字的進度條

簡單製作一個進度條，效果如下：不多說，直接上程式碼： import time EACH_STEP_COST_TIME = 0.3 PROCESS_TOTAL_STEP = 40 def process_bar(current_state, total_state, bar_l

預載入+監聽圖片資源載入製作進度條

這兩天遇到一個新需求：一個一鏡到底的h5動畫。因為功能的特殊性，就要求我們提前監聽頁面的靜態圖片是否全部載入完畢。即處理預載入。總結下來，下次這種需求需要提前注意以下幾點：一、圖片而不是背景圖本來，我所用到的圖都是用背景圖製作的（因為非介面返回的圖片都要求用背景圖）。但是監聽靜態圖片時，後

143行js頂部進度條最小外掛-nanobar.js原始碼解析

網頁頂部進度條外掛的有四五種，基本原理就是動態地建立一個元素，然後通過設定它的width來實現動畫效果，width增長到達指定位置時，將其去掉。來看看nanobar.js作者jacoborus是怎麼做到的吧！ /* http://nanobar.micronu

純css實現頂部進度條隨滾動條滾動

<!DOCTYPE html> <head> 　　<meta charset="utf-8"> 　　<meta http-equiv="X-UA-Compatible" content="IE=edge"> 　　<tit

進度條製作-固定在頂部