CSS實現的loading頁面等待效果

阿新 • • 發佈：2019-01-16

有些頁面載入起來比較慢，為了加強使用者體驗效果，所以一般都會做一個頁面載入等待的提示，頁面載入完成後消失。下面是用CSS實現的一個簡單的頁面載入等待效果，大家可以參考：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<style type="text/css">
.loading{
	width:160px;
	height:56px;
	position: absolute;
	top:50%;
	left:50%;
	line-height:56px;
	color:#fff;
	padding-left:60px;
	font-size:15px;
	background: #000 url(images/loader.gif) no-repeat 10px 50%;
	opacity: 0.7;
	z-index:9999;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
</head>

<body>
<div id="loading" class="loading">Loading pages...</div>
</body>
</html>

css中的圖片在下面：

整個效果圖如下：

CSS實現的loading頁面等待效果

有些頁面載入起來比較慢，為了加強使用者體驗效果，所以一般都會做一個頁面載入等待的提示，頁面載入完成後消失。下面是用CSS實現的一個簡單的頁面載入等待效果，大家可以參考： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HT

css實現h5頁面滾動效果

由於手機螢幕空間較小，在手機端顯示分類導航多時一行顯示不全，常常在後面顯示一個'更多',點選展開全部，選擇後再隱藏。這種互動不時很完美，在使用者反覆選擇時，就得來回點使其展開、隱藏。在移動端有更好的展示方式，如'蜻蜓FM'app上的節目分類是採用的左右滾動方式，方便使

不用gif圖，用js+css實現loading效果

要理解loading的原理，即在文件載入完成之前顯示loading效果，隱藏主文件內容，而在文件載入完成之後，隱藏loading效果，顯示主文件內容。 <!DOCTYPE html> <html lang="zh_CN"> <head&g

使用SVG + CSS實現動態霓虹燈文字效果

rdp orm ans cnblogs fill href 大神 case ima 效果圖：原理：多個SVG描邊動畫使用不同的animation-delay即可！對於一個形狀SVG元素或文本SVG元素，可以使用stroke-dasharray來控制描邊的間隔樣式，並且

CSS實現tost彈窗效果

html: <div class="black-and-white-b"> <div class="hintBox"></div> </div> css: .bla

css實現盾牌的動畫效果

直接上程式碼：用偽類選擇器去選擇每個圖片，再進行2d動畫的實現 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

【CSS】純css實現立體擺放圖片效果

1. 元素的 width/height/padding/margin 的百分比基準設定一個元素 width/height/padding/margin 的百分比的時候，大家可知道基準是什麼？舉個栗子： .parent { width: 200px; height: 100px; } .ch

基礎面試題之 —— CSS實現簡單頁面佈局的幾種方法

頁面佈局是前端面試中CSS部分經常考到的問題，本文列舉幾種簡單頁面佈局的方法：絕對定位 + margin float inline-block flex 附加：響應式佈局其中幾種方法在CSS程式碼上有相似之處，也有侷限或是需要特殊注意的地方，下文具體指出。

css實現背景backgroup漸變效果,相容各個瀏覽器(直接生成)

筆者其實對於css一直是一知半解的狀態。今天公司的需求需要讓背景如圖上所示。通過度娘找到了一個強大的背景漸變手動設計的網站，在此分享 gradient-editor(國外開發者) 順便獻上自己css程式碼。或許有些用處 background: rgb(

你想不到的！CSS 實現的各種球體效果【附線上演示】

　　CSS 可以實現很多你想不到的效果，今天我們來嘗試使用 CSS 實現各種球體效果。有兩種方法可以實現，第一種是使用大量的元素建立實際的 3D 球體，這種方法有潛在的效能問題；另外一種是使用 CSS3 漸變和陰影特性來實現，實現方法簡單，效果精美。　　為保證效果，請使用 Chrome、Firefox、S

css實現按鈕點選效果

在html中設定class： <button class="button1">click</button> css中如下所示： .button1{ position: relative; /** 相對佈局 **/ } .button1

用純CSS實現載入中動畫效果

HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"&

CSS實現Loading載入動畫

優秀的前端工程師總是優先考慮用CSS替代圖片：基本思路是建立8個圓形div，絕對定位排列成圓圈，然後，依次通過opacity屬性更新透明度，就得到一個loading的效果圖。和GIF相比，CSS實現的好處主要在於，對於不同背景顏色，該動畫都是完美的，還可以用CS

android之ViewPager簡單實現區域性頁面滑動效果

-Viewpager能實現什麼效果？ -實現左右滑動，切換view的效果。 -既可以實現整個頁面左右滑動，也可以實現同一個頁面中區域性左右滑動。搞清楚viewpager的作用後，開始寫一個簡單例子，實現同一個頁面中區域性滑動的效果。在coding前要做的準備工作 2

使用css實現點選切換效果

首先先製作一個容器，用來容納所顯示的內容： HTML程式碼： <html></html> <head> <meta charset="utf-8"

純css實現的流星雨的效果

檢視效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

不用ViewPager和Fragment實現滑動頁面的效果

這是一篇被逼出來的文章。一入SDK深似海，從此jar包是路人，沒錯，你以為我願意不用ViewPager和Fragment啊，因為SDK為了減少包體大小不能用v4的包啊！坑爹的v4包居然有1M多，你們可真能寫啊。我相信一定有朋友會建議說，把v4包裡相關的類摳出

HTML+CSS實現註冊頁面

<!DOCTYPE html> <html> <head> <title>註冊</title> </head> <form

通過css實現單選按鈕效果

剛剛入門（可能還沒入門）的小前端，遇見兩次實現單選按鈕的效果，如下：現在總結一下實現這兩種樣式的程式碼。第一種：<form action="#"> <div class=" info "> <div class="radiobox "

ViewPager+Fragment 實現滑動頁面的效果

佈局檔案如下： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

CSS實現的loading頁面等待效果

相關推薦