2. 程式人生 > 其它 >CSS實現loading效果

CSS實現loading效果

阿新 • • 發佈：2021-01-12

CSS實現loading效果

前言

使用animation動畫實現loading效果。

一、條狀loading

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title
 
>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        .loading {
            display: flex;
            justify-content: space-around;
            align-items
 
: center;
            width: 100px;
            height: 100px;
            margin: 100px auto;
        }
        
        .loading span {
            width: 10px;
            height: 100%;
            background-color: darkcyan;
            border-radius: 5px;
            animation: load 1s linear infinite;
        }
 

        
        @keyframes load {
            0%,
            100% {
                height: 50%;
                background-color: cornsilk;
            }
            50% {
                height: 100%;
                background-color: darkcyan;
            }
        }
        
        .loading :nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .loading :nth-child(3) {
            animation-delay: 0.4s;
        }
        
        .loading :nth-child(4) {
            animation-delay: 0.6s;
        }
        
        .loading :nth-child(5) {
            animation-delay: 0.8s;
        }
        
        .loadEffect {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top: 100px;
        }
        
        .loadEffect span {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        
        @-webkit-keyframes load {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0.2;
            }
        }
    </style>
</head>

<body>
    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

二、圓圈loading

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        .loadEffect {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 100px auto;
        }
        
        .loadEffect span {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: darkgray;
            animation: load2 2s ease-in-out infinite;
        }
        
        .loadEffect span:nth-child(1) {
            top: 50%;
            left: 0;
            margin-top: -10px;
        }
        
        .loadEffect span:nth-child(2) {
            top: 15px;
            left: 15px;
            animation-delay: 0.25s;
        }
        
        .loadEffect span:nth-child(3) {
            top: 0;
            left: 50%;
            margin-left: -10px;
            animation-delay: 0.5s;
        }
        
        .loadEffect span:nth-child(4) {
            top: 15px;
            right: 15px;
            animation-delay: 0.75s;
        }
        
        .loadEffect span:nth-child(5) {
            top: 50%;
            right: 0;
            margin-top: -10px;
            animation-delay: 1s;
        }
        
        .loadEffect span:nth-child(6) {
            bottom: 15px;
            right: 15px;
            animation-delay: 1.25s;
        }
        
        .loadEffect span:nth-child(7) {
            bottom: 0;
            right: 50%;
            margin-right: -10px;
            animation-delay: 1.5s;
        }
        
        .loadEffect span:nth-child(8) {
            bottom: 15px;
            left: 15px;
            animation-delay: 1.75s;
        }
        
        @keyframes load2 {
            0% {
                transform: scale(1.2);
                opacity: 1;
            }
            100% {
                transform: scale(0.3);
                opacity: 0.2;
            }
        }
    </style>
</head>

<body>
    <div class="loadEffect">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

參考博文：https://www.cnblogs.com/jr1993/p/4622039.html

相關推薦

CSS實現loading效果

CSS實現loading效果 前言 使用animation動畫實現loading效果。 一、條狀loading <!DOCTYPE html>

css 實現手風琴效果

效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

大廠前端推薦純css實現氣泡效果

效果圖： 主要運用的是1.border 組成的直角三角形。2，before 和 after 偽元素 。3，z-index屬性

css實現半圓效果

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

css實現開關效果

首先是構思 我們使用<input type=\"checkbox\">標籤來實現這個效果。checkbox的選中、未選中的特性，剛好對應開關的開啟、關閉on:開啟 off:關閉

5分鐘用CSS實現毛玻璃效果 CSS Glassmorphism

技術標籤：CSSJScsscss毛玻璃Glassmorphism 目錄 1 視訊 2 知識點 2.1CSS calc() 函式 2.2 CSS var() 函式

css 實現圓角效果的幾種方法

技術標籤：csscsscss3 **border-radius：**用這個屬效能實現圓角邊框的效果。現在只有Mozilla/Firefox 和 Safari 3支援該屬性。 **-webkit-border-radius：**蘋果；谷歌，等一些瀏覽器認，因為他們都用的是webki

前端CSS實現Loading載入

技術標籤：前端css ** Loading載入方式的實現 ** 1.border-radius屬性實現 HTML程式碼 <!-- loading載入實現效果 -->

vue中使用animate.css實現動畫效果

animate.css 是一個來自國外的 CSS3 動畫庫，它提供了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果，幾乎包含了所

純css實現的loading效果

<!DOCTYPE html> <html> <head> <title>SpinKit Examples</title> <style type=\"text/css\">

javascript+css實現進度條效果

本文例項為大家分享了Android九宮格圖片展示的具體程式碼，供大家參考，具體內容如下

WordPress用JavaScript和CSS實現二級選單展開手風琴效果

[ wordpress中有很多外掛來實現二級選單，比如wordpress外掛 ： 利用Max Mega Menu實現二級選單的伸縮，不過，如果要簡單地實現二級選單展開手風琴效果，可以用下面的程式碼，不過得自己定位到一級選單，定位方法如下

使用HTML和CSS實現3D文字效果

方法：3D文字動畫效果是通過text-shadow屬性設計的。應用在多個文字陰影上，主要是因為使用了3D效果，外觀看起來好像我們僅應用單個文字陰影，對於單詞中存在的所有字母來說，它都是相同的。但是對於3D效果，我們希望

js+css實現扇形導航效果

本文例項為大家分享了js+css實現扇形導航效果的具體程式碼，供大家參考，具體內容如下\\

純css實現盒子3d旋轉效果

純css實現盒子3D旋轉效果 平時看到動畫下意識就覺得很難，出於畏懼心理老是不敢去碰，就像看到一個漂亮女生不敢上去搭訕，不過嘛，

HTML+CSS實現摩天輪效果

實現效果：小人跟著輪子轉，但小人要一直底部朝下 HTML程式碼： <body> <div class=\"bbox\">

JS+CSS實現炫酷光感效果

JS+CSS帶你實現炫酷光感效果，供大家參考，具體內容如下 效果一：（螺旋式沉浸視覺感受）

CCS實現loading載入效果

body <div class="box"> <div></div> <div></div> <div></div>

CSS實現雨滴動畫效果

玻璃窗 今天我們要實現的是雨滴效果，不過實現雨滴前，我們先把毛玻璃的效果弄出來，沒有玻璃窗，雨都進屋了，還有啥好敲打的。

css實現方塊立體旋轉效果

效果預覽： html程式碼： 3d </head> <body> <div class=\"cube\"> //把這裡的檔案替換為自己的圖片即可