css實現載入中loading動畫效果

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

1.html

<div class="load-container">
   <div class="loader"></div>
    <p>載入中請稍後...</p>
</div>

2.css

.load-container{padding:20px 0;text-align:center;}
.load-container p{display:inline-block;position:relative;top:-30px;padding-left:15px;font-size:14px;color:#0fa4f6;}
.load-container  
.loader{display:inline-block;font-size:30px;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;margin:0.8em auto;position:relative;-webkit-animation:load 1.7s infinite ease;animation:load 2s infinite ease;}
@-webkit-keyframes load{
   0%{-webkit-transform:rotate(0deg);transform:rotate 
(0deg);box-shadow:-0.11em -0.83em 0 -0.4em #d4eaf4,-0.11em -0.83em 0 -0.42em #d4eaf4,-0.11em -0.83em 0 -0.44em #d4eaf4,-0.11em -0.83em 0 -0.46em #d4eaf4,-0.11em -0.83em 0 -0.477em #d4eaf4;}
   5%,
95%{box-shadow:-0.11em -0.83em 0 -0.4em #a4dbf4,-0.11em -0.83em 0 -0.42em #a4dbf4,-0.11em -0.83em 0 -0.44em #a4dbf4,-0.11em -0.83em 0 -0.46em  
#a4dbf4,-0.11em -0.83em 0 -0.477em #a4dbf4;}
   30%{box-shadow:-0.11em -0.83em 0 -0.4em #5bc5f4,-0.51em -0.66em 0 -0.42em #5bc5f4,-0.75em -0.36em 0 -0.44em #5bc5f4,-0.83em -0.03em 0 -0.46em #5bc5f4,-0.81em 0.21em 0 -0.477em #5bc5f4;}
   55%{box-shadow:-0.11em -0.83em 0 -0.4em #2ab6f4,-0.29em -0.78em 0 -0.42em #2ab6f4,-0.43em -0.72em 0 -0.44em #2ab6f4,-0.52em -0.65em 0 -0.46em #2ab6f4,-0.57em -0.61em 0 -0.477em #2ab6f4;}
   100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
}
@keyframes load{
   0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);box-shadow:-0.11em -0.83em 0 -0.4em #d4eaf4,-0.11em -0.83em 0 -0.42em #d4eaf4,-0.11em -0.83em 0 -0.44em #d4eaf4,-0.11em -0.83em 0 -0.46em #d4eaf4,-0.11em -0.83em 0 -0.477em #d4eaf4;}
   5%,
95%{box-shadow:-0.11em -0.83em 0 -0.4em #a4dbf4,-0.11em -0.83em 0 -0.42em #a4dbf4,-0.11em -0.83em 0 -0.44em #a4dbf4,-0.11em -0.83em 0 -0.46em #a4dbf4,-0.11em -0.83em 0 -0.477em #a4dbf4;}
   30%{box-shadow:-0.11em -0.83em 0 -0.4em #5bc5f4,-0.51em -0.66em 0 -0.42em #5bc5f4,-0.75em -0.36em 0 -0.44em #5bc5f4,-0.83em -0.03em 0 -0.46em #5bc5f4,-0.81em 0.21em 0 -0.477em #5bc5f4;}
   55%{box-shadow:-0.11em -0.83em 0 -0.4em #2ab6f4,-0.29em -0.78em 0 -0.42em #2ab6f4,-0.43em -0.72em 0 -0.44em #2ab6f4,-0.52em -0.65em 0 -0.46em #2ab6f4,-0.57em -0.61em 0 -0.477em #2ab6f4;}
   100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
}

css實現載入中loading動畫效果

1.html<div class="load-container"> <div class="loader"></div> <p>載入中請稍後...</p> </div>2.css.load

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

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

通過JS和CSS，實現網頁載入中的動畫效果

需要材料：一張loading動畫的gif圖片基本邏輯：模態框遮罩 + loading.gif動圖，預設隱藏模態框頁面開始傳送Ajax請求資料時，顯示模態框請求完成，隱藏模態框

利用css3的animation實現點點點loading動畫效果（二）

設置 str ack rdp 提交 ssi frame spin color box-shadow實現的打點效果簡介 box-shadow理論上可以生成任意的圖形效果，當然也就可以實現點點點的loading效果了。實現原理 html代碼，首先需要寫如下html代

正在下載中，請稍候的Loading載入中浮層效果實現

背景: 當實現下載檔案等後臺需長時間處理時，使用者點選頁面的一個按鈕或連結，應給予使用者一定提示告知使用者後臺正在處理中，稍後返回結果。目前常見的處理方法有頁面跳出圖層，比如"Loading…"，“後

CSS3 實現loading動畫效果

https://www.jianshu.com/p/55372466ce70 前幾篇介紹了CSS3的3個動畫屬性transform，transition，animation。但即使基本語法能看懂，也不代表能設計出棒棒的動畫效果。在設計這條路上，是學無止境，甚至需要拼天賦的。我也

使用CSS3實現載入中動畫

在以往的網頁製作中，通常會使用一個GIF圖片來表達loading效果。但隨著CSS3的興起與發展，越來越多的載入中特效可以通過動畫效果來實現。這樣做得好處是： 1.較少http請求， 2.解決GIF圖片失真的問題， 3.便於大小以及顏色的調整。以下為博主新制作的一個l

jQuery實現載入中效果,防止重複提交

//匯出表格載入中的提示var dian=0;//控制'●'的個數var t=null;//停止時使用function id_loadspot(loadspotSpan,loadingDiv,exportLink){ 　　loadingDiv.css('visibility','visible');//顯示

仿美團loading載入中的動畫

demo原始碼下載：下載前言在Android 中是不支援直接使用Gif 圖片關聯播放幀動畫，Android 提供了另外一種解決的辦法，就是使用AnimationDrawable 這一函式使其支援逐幀播放，但是如何把gif 圖片打散開來，成為每一幀的圖片呢？下

各類載入loading動畫效果

效果一：一、HTML <div class="loader">Loading...</div> 二、CSS /*綠色背景*/ body { background:#4ea980; margin:50px; } /*純白色圈*/ .l

[Swift通天遁地]五、高階擴充套件-(11)影象載入Loading動畫效果的自定義和快取

本文將演示影象載入Loading動畫效果的自定義和快取。首先確保在專案中已經安裝了所需的第三方庫。點選【Podfile】,檢視安裝配置檔案。 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5

ListView GridView中item載入顯示的動畫效果

首先看一下效果圖,ListView和GridView中item顯示動畫 1.ListView中的item載入顯示動畫 1)直接給ListView設定動畫 private void initView() { setConten

利用 :before :after偽類實現鼠標懸浮動畫效果

type 兼容 str log 參考 tex 觸發 strong nsf 1、最近在逛網站的時候，想找一下喜歡的鼠標懸浮效果，避免廣告的嫌疑，直接放圖了： 2、在實現的時候，如果在直接使用鼠標hover ,transform,進行過渡，不能達到想要的效果，因為同

關於ValueAnimation以及Interpolator +Drawable實現的自己定義動畫效果

idt edit 由於 height over 等等 -s line alt ValueAnimation : Android中的屬性動畫，他跟objectAnim

WPF實現3D翻轉的動畫效果

紋理映射 svi host child rotate diffuse lean mouse sem 1、前端代碼實現 1.1 原理見代碼註析 1 <Grid MouseDown="Grid_MouseDown"> 2 <Viewport3D&

jQuery實現加入購物車飛入動畫效果之開發不停，填坑不止（起點位置在Y軸方向位置偏移）

開發時為了完成購物車的飛入拋物線，因為懶惰隨大流使用了fly.js外掛，用的時候遇到的兩個坑坑~~ 1. 有滾動條時，拋物體的起點位置在Y軸方向上有位置偏移，偏大 2. 頁面有滾動條時，拋物體的結束位置不一樣，偏大我：(⊙o⊙)…煩煩的。。。這就是用別人東西的代價。。。。。。不

Jquery實現購物車的新增動畫效果

//這塊獲取的購物車的位置 #cartN這個是購物車的id var offset = $('#cartN').offset(); //這塊是店家新增的時候的時候的操作 $(".add1").click(function () { &

使用CSS實現一個簡單的幻燈片效果

方法一：簡單的CSS程式碼實現幻燈片效果話不多說，直接上程式碼 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>C

用canvas實現紅心飄飄的動畫效果

兩週前，專案裡需要實現一個紅心飄飄的點贊效果。抓耳撓腮了老半天，看了幾篇大佬的文章，終於算是摸了個七七八八。不禁長嘆一聲，還是菜啊。先來看一下效果:(傳送門進去點一波) 一、Bezier曲線運動軌跡其實用大白話描述一下需求就是讓一個紅心圖片沿著貝塞爾曲線的軌跡走，然後邊走邊消失。核心在於得到貝塞爾曲線

JQuery中的動畫效果

show() hide() slideUp slideDown fadeIn fadeOut animate : 自定義動畫 JQuery中的動畫效果.html <!DOCTYPE html> <html> <head> <m

css實現載入中loading動畫效果

相關推薦