• LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
     
    網站管理員

    常見的前端加載loading樣式

    freeflydom
    2024年5月1日 7:48 本文熱度 197

    前言

    開發項目遇到需要添加前端loading樣式的問題,遂想到參考一些成熟的解決方案。找到了UIverse網站Explore 3000+ Free UI Elements: CSS & Tailwind (uiverse.io)這個樣式庫,動手學習了幾個常用的loading樣式并進行了修改學習。 下面先放上各樣式對應的html和css片段(均為MIT許可)。

    樣式預覽及代碼片段

    • 1. Loader by satyamchaudharydev

    <div class="loader"></div>


    .loader {

      display: block;

      --height-of-loader: 4px;

      --loader-color: #0071e2;

      width: 130px;

      height: var(--height-of-loader);

      border-radius: 30px;

      background-color: rgba(0,0,0,0.2);

      position: relative;

    }


    .loader::before {

      content: "";

      position: absolute;

      background: var(--loader-color);

      top: 0;

      left: 0;

      width: 0%;

      height: 100%;

      border-radius: 30px;

      animation: moving 1s ease-in-out infinite;

      ;

    }


    @keyframes moving {

      50% {

        width: 100%;

      }


      100% {

        width: 0;

        right: 0;

        left: unset;

      }

    }


    • 2. Loader by milley69

    <div class="loading">

      <svg width="64px" height="48px">

          <polyline points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24" id="back"></polyline>

        <polyline points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24" id="front"></polyline>

      </svg>

    </div>


    .loading svg polyline {

      fill: none;

      stroke-width: 3;

      stroke-linecap: round;

      stroke-linejoin: round;

    }


    .loading svg polyline#back {

      fill: none;

      stroke: #ff4d5033;

    }


    .loading svg polyline#front {

      fill: none;

      stroke: #ff4d4f;

      stroke-dasharray: 48, 144;

      stroke-dashoffset: 192;

      animation: dash_682 1.4s linear infinite;

    }


    @keyframes dash_682 {

      72.5% {

        opacity: 0;

      }


      to {

        stroke-dashoffset: 0;

      }

    }


    • 3.  Loader by G4b413l

    <div class="three-body">

    <div class="three-body__dot"></div>

    <div class="three-body__dot"></div>

    <div class="three-body__dot"></div>

    </div>


    .three-body {

     --uib-size: 35px;

     --uib-speed: 0.8s;

     --uib-color: #5D3FD3;

     position: relative;

     display: inline-block;

     height: var(--uib-size);

     width: var(--uib-size);

     animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;

    }


    .three-body__dot {

     position: absolute;

     height: 100%;

     width: 30%;

    }


    .three-body__dot:after {

     content: '';

     position: absolute;

     height: 0%;

     width: 100%;

     padding-bottom: 100%;

     background-color: var(--uib-color);

     border-radius: 50%;

    }


    .three-body__dot:nth-child(1) {

     bottom: 5%;

     left: 0;

     transform: rotate(60deg);

     transform-origin: 50% 85%;

    }


    .three-body__dot:nth-child(1)::after {

     bottom: 0;

     left: 0;

     animation: wobble1 var(--uib-speed) infinite ease-in-out;

     animation-delay: calc(var(--uib-speed) * -0.3);

    }


    .three-body__dot:nth-child(2) {

     bottom: 5%;

     right: 0;

     transform: rotate(-60deg);

     transform-origin: 50% 85%;

    }


    .three-body__dot:nth-child(2)::after {

     bottom: 0;

     left: 0;

     animation: wobble1 var(--uib-speed) infinite

        calc(var(--uib-speed) * -0.15) ease-in-out;

    }


    .three-body__dot:nth-child(3) {

     bottom: -5%;

     left: 0;

     transform: translateX(116.666%);

    }


    .three-body__dot:nth-child(3)::after {

     top: 0;

     left: 0;

     animation: wobble2 var(--uib-speed) infinite ease-in-out;

    }


    @keyframes spin78236 {

     0% {

      transform: rotate(0deg);

     }


     100% {

      transform: rotate(360deg);

     }

    }


    @keyframes wobble1 {

     0%,

      100% {

      transform: translateY(0%) scale(1);

      opacity: 1;

     }


     50% {

      transform: translateY(-66%) scale(0.65);

      opacity: 0.8;

     }

    }


    @keyframes wobble2 {

     0%,

      100% {

      transform: translateY(0%) scale(1);

      opacity: 1;

     }


     50% {

      transform: translateY(66%) scale(0.65);

      opacity: 0.8;

     }

    }


    • 4. Loader by barisdogansutcu

    <svg viewBox="25 25 50 50">

      <circle r="20" cy="50" cx="50"></circle>

    </svg>


    svg {

     width: 3.25em;

     transform-origin: center;

     animation: rotate4 2s linear infinite;

    }


    circle {

     fill: none;

     stroke: hsl(214, 97%, 59%);

     stroke-width: 2;

     stroke-dasharray: 1, 200;

     stroke-dashoffset: 0;

     stroke-linecap: round;

     animation: dash4 1.5s ease-in-out infinite;

    }


    @keyframes rotate4 {

     100% {

      transform: rotate(360deg);

     }

    }


    @keyframes dash4 {

     0% {

      stroke-dasharray: 1, 200;

      stroke-dashoffset: 0;

     }


     50% {

      stroke-dasharray: 90, 200;

      stroke-dashoffset: -35px;

     }


     100% {

      stroke-dashoffset: -125px;

     }

    }


    • 5. Loader by sahilxkhadka

    <div class="relative flex w-64 animate-pulse gap-2 p-4">

      <div class="h-12 w-12 rounded-full bg-slate-400"></div>

      <div class="flex-1">

        <div class="mb-1 h-5 w-3/5 rounded-lg bg-slate-400 text-lg"></div>

        <div class="h-5 w-[90%] rounded-lg bg-slate-400 text-sm"></div>

      </div>

      <div class="absolute bottom-5 right-0 h-4 w-4 rounded-full bg-slate-400"></div>

    </div>


    作者:Zeworl_rod
    鏈接:https://juejin.cn/post/7364404706918744105
    來源:稀土掘金
    著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。



    該文章在 2024/5/6 15:04:41 編輯過
    關鍵字查詢
    相關文章
    正在查詢...
    點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
    點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
    點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
    點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
    Copyright 2010-2024 ClickSun All Rights Reserved

    日本高清无卡码一区二区久久|国产高清一区二区三区|高清无码一区二区三区四区|国产精品无码一区二区免费n