コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
見せてみましょう
1. 「スクロール」ローディング
2. 「ブロックの消失」テクニック」ロード
3. 「無敵の風火大鎌」が装填されました
1 要素のスケーリングは非常に簡単ですが、15 要素はどうなりますか?
要素の透明度と高さを組み合わせることで、ユニークな効果を生み出すこともできます
4 個のサークルを搭載した「無敵の風と火のサークル」は、実際に比較的反発効果を生み出すことができますか?
ホームページ ウェブフロントエンド CSSチュートリアル プロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！

プロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！

青灯夜游
青灯夜游
Oct 19, 2021 am 11:27 AM
css loading 負荷

この記事では、あなたのプロジェクトを輝かせること間違いなしの 10 個のローディング ローディング エフェクトを紹介します。皆さんのお役に立てれば幸いです。ぜひ集めてください。 ！

プロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！

#誰もが読み込みアニメーションをよく使用すると思いますが、ほとんどのコンポーネント ライブラリの読み込みスタイルは単純すぎます。

今回はフロントエンドワーカー向けにハイエンドな読み込みアニメーションエフェクトを10個集めました。 ！コピーして直接使用してください。 ！

見せてみましょう

1. 「スクロール」ローディング

ジャンプと回転のブロックとグラデーション

プロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！##

<!-- loading.html -->
<div class="boxLoading"></div>
ログイン後にコピー
/* loading.css */
.boxLoading {  
  width: 50px;
  height: 50px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.boxLoading:before {
  content: &#39;&#39;;
  width: 50px;
  height: 5px;
  background: #fff;
  opacity: 0.7;
  position: absolute;
  top: 59px;
  left: 0;
  border-radius: 50%;
  animation: shadow .5s linear infinite;
}
.boxLoading:after {
  content: &#39;&#39;;
  width: 50px;
  height: 50px;
  background: #e04960;
  animation: animate .5s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
}
@keyframes animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, .9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@keyframes shadow {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
ログイン後にコピー

作者: Dicson

2. 「ブロックの消失」テクニック」ロード

#各消滅ブロックを統合し、異なる消滅時間を設定するとどうなるでしょうか？

プロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！

<!-- loading.html -->
<div class="sk-cube-grid">
    <div class="sk-cube sk-cube-1"></div>
    <div class="sk-cube sk-cube-2"></div>
    <div class="sk-cube sk-cube-3"></div>
    <div class="sk-cube sk-cube-4"></div>
    <div class="sk-cube sk-cube-5"></div>
    <div class="sk-cube sk-cube-6"></div>
    <div class="sk-cube sk-cube-7"></div>
    <div class="sk-cube sk-cube-8"></div>
    <div class="sk-cube sk-cube-9"></div>
  </div>
ログイン後にコピー
/* loading.css */
.sk-cube-grid {
  width: 4em;
  height: 4em;
  margin: auto; 
}
.sk-cube {
  width: 33%;
  height: 33%;
  background-color: #e04960;
  float: left;
  animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
}
.sk-cube-1 {
  animation-delay: 0.2s;
}
.sk-cube-2 {
  animation-delay: 0.3s;
}
.sk-cube-3 {
  animation-delay: 0.4s;
}
.sk-cube-4 {
  animation-delay: 0.1s;
}
.sk-cube-5 {
  animation-delay: 0.2s;
}
.sk-cube-6 {
  animation-delay: 0.3s;
}
.sk-cube-7 {
  animation-delay: 0s;
}
.sk-cube-8 {
  animation-delay: 0.1s;
}
.sk-cube-9 {
  animation-delay: 0.2s;
}
@keyframes sk-cube-grid-scale-delay {
  0%, 70%, 100% {
    transform: scale3D(1,1,1);
  }
  35%           {
    transform: scale3D(0,0,1);
  }
}
ログイン後にコピー

作者: Nicola Pressi

3. 「無敵の風火大鎌」が装填されました

4本の鎌を前後に斬るとどんな現象が起きるでしょうか？

#

<!-- loading.html -->
<div class="spinner">
  <div class="outer">
    <div class="inner tl"></div>
    <div class="inner tr"></div>
    <div class="inner br"></div>
    <div class="inner bl"></div>
  </div>
</div>
ログイン後にコピー
/* loading.css */
.spinner {
  position: absolute;
  width: 128px;
  height: 128px;
  top: calc(50% - 64px);
  left: calc(50% - 64px);
  transform: perspective(206px) rotateX(45deg);
}

.outer {
  box-sizing: border-box;
  animation: spin 3s linear infinite;
  height: 100%;
}

.inner {
  position: absolute;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  animation: spin 1.8s ease-in-out infinite;
}
.inner.tl {
  top: 0;
  left: 0;
  border-top: 2px solid #531430;
  border-left: 4px solid #531430;
}
.inner.tr {
  top: 0;
  right: 0;
  border-top: 2px solid #e04960;
  border-right: 4px solid #e04960;
}
.inner.br {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #531430;
  border-right: 4px solid #531430;
}
.inner.bl {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #e04960;
  border-left: 4px solid #e04960;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
ログイン後にコピー
プロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！

著者: Martin van Driel

4.「パディング」ロード

単純な正方形の回転と内部の高さ制御により、塗りつぶし効果を実現できます~

#
<!-- loading.html -->
<span class="loading">
  <span class="loading-inner"></span>
</span>
ログイン後にコピー
/* loading.css */
.loading {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #e04960;
  animation: loader 4s infinite ease;
}
.loading-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #e04960;
  animation: loader-inner 4s infinite ease-in;
}
@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loader-inner {
  0% {
    height: 0%;
  }  
  25% {
    height: 0%;
  }
  50% {
    height: 100%;
  }
  75% {
    height: 100%;
  } 
  100% {
    height: 0%;
  }
}
ログイン後にコピー

プロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！著者: Josh

5.「yinglang」ロード

1 要素のスケーリングは非常に簡単ですが、15 要素はどうなりますか?

#

<!-- loading.html -->
<div class="loader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
ログイン後にコピー
/* loading.css */
.loader {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 175px;
  height: 100px;
}
.loader span {
  display: block;
  background: #e04960;
  width: 7px;
  height: 100%;
  border-radius: 14px;
  margin-right: 5px;
  float: left;
}
.loader span:last-child {
  margin-right: 0px;
}
.loader span:nth-child(1) {
  animation: load 2.5s 1.4s infinite linear;
}
.loader span:nth-child(2) {
  animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(3) {
  animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(4) {
  animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(5) {
  animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(6) {
  animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(7) {
  animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(8) {
  animation: load 2.5s 0s infinite linear;
}
.loader span:nth-child(9) {
  animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(10) {
  animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(11) {
  animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(12) {
  animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(13) {
  animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(14) {
  animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(15) {
  animation: load 2.5s 1.4s infinite linear;
}
@keyframes load {
  0% {
    background: #531430;
    transform: scaleY(0.08);
  }
  50% {
    background: #e04960;
        
   transform: scaleY(1);
  }
  100% {
    background: #531430;    
    transform: scaleY(0.08);
  }
}
ログイン後にコピー

作者: Dicsonプロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！

6. 「サウンド ウェーブ」が読み込まれます

要素の透明度と高さを組み合わせることで、ユニークな効果を生み出すこともできます

<!-- loading.html -->
<div class="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
ログイン後にコピー
/* loading.css */
.bars {
  height: 30px;
  left: 50%;
  margin: -30px 0 0 -20px;
  position: absolute;
  top: 60%;
  width: 40px;
}
.bar {
 background: #e04960;
  bottom: 1px;
  height: 3px;
  position: absolute;
  width: 3px;      
  animation: sound 0ms -800ms linear infinite alternate;
}
@keyframes sound {
  0% {
     opacity: .35;
      height: 3px; 
  }
  100% {
      opacity: 1;       
      height: 28px;        
  }
}
.bar:nth-child(1)  { left: 1px; animation-duration: 474ms; }
.bar:nth-child(2)  { left: 5px; animation-duration: 433ms; }
.bar:nth-child(3)  { left: 9px; animation-duration: 407ms; }
.bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }
.bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }
.bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }
.bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }
.bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }
.bar:nth-child(9)  { left: 33px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }
ログイン後にコピー

著者: El Alemañoプロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！

7.

4 個のサークルを搭載した「無敵の風と火のサークル」は、実際に比較的反発効果を生み出すことができますか? 

<!-- loading.html -->
<div class="loading">
  <div class="inner one"></div>
  <div class="inner two"></div>
  <div class="inner three"></div>
  <div class="inner four"></div>
</div>
ログイン後にコピー
/* loading.css */
.loading {
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transform: perspective( 128px ) rotateX( 30deg );
}
.inner {
  position: absolute;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-color: #e04960;
  border-radius: 50%;
}
.inner.one {
  left: 0%;
  top: 0%;
  animation: move-right 1s ease-out infinite;
}
.inner.two {
  right: 0%;
  top: 0%;
  animation: move-down 1s ease-in-out infinite;
}
.inner.three {
  right: 0%;
  bottom: 0%;
  animation: move-left 1s ease-in-out infinite;
}
.inner.four {
  left: 0%;
  bottom: 0%;
  animation: move-up 1s ease-out infinite;
}
@keyframes move-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(32px);
  }
}
@keyframes move-down {
  0% {
    transform: translateY();
  }
  100% {
    transform: translateY(32px);
  }
}
@keyframes move-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-32px);
  }
}
@keyframes move-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-32px);
  }
}
ログイン後にコピー

著者: Martin van Drielプロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！

8. 「ビー玉」のロード

小さなビー玉が 1 つずつ前後に動くだけで、こんなに素晴らしい絵が描けるのです

##

<!-- loading.html -->
<div class="container">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
</div>
ログイン後にコピー
/* loading.css */
.container {
    width: 200px;
    height: 100px;
    margin: 0 auto;
}
.ball {
    width: 10px;
    height: 10px;
    margin: 10px auto;
    border-radius: 50px;
}
.ball:nth-child(1) {
    background: #e04960;
    -webkit-animation: right 1s infinite ease-in-out;
    -moz-animation: right 1s infinite ease-in-out;
    animation: right 1s infinite ease-in-out;
}
.ball:nth-child(2) {
    background: #e04960;
    -webkit-animation: left 1.1s infinite ease-in-out;
    -moz-animation: left 1.1s infinite ease-in-out;
    animation: left 1.1s infinite ease-in-out;
}
.ball:nth-child(3) {
    background: #e04960;
    -webkit-animation: right 1.05s infinite ease-in-out;
    -moz-animation: right 1.05s infinite ease-in-out;
    animation: right 1.05s infinite ease-in-out;
}
.ball:nth-child(4) {
    background: #e04960;
    -webkit-animation: left 1.15s infinite ease-in-out;
    -moz-animation: left 1.15s infinite ease-in-out;
    animation: left 1.15s infinite ease-in-out;
}
.ball:nth-child(5) {
    background: #e04960;
    -webkit-animation: right 1.1s infinite ease-in-out;
    -moz-animation: right 1.1s infinite ease-in-out;
    animation: right 1.1s infinite ease-in-out;
}
.ball:nth-child(6) {
    background: #e04960;
    -webkit-animation: left 1.05s infinite ease-in-out;
    -moz-animation: left 1.05s infinite ease-in-out;
    animation: left 1.05s infinite ease-in-out;
}
.ball:nth-child(7) {
    background: #e04960;
    -webkit-animation: right 1s infinite ease-in-out;
    -moz-animation: right 1s infinite ease-in-out;
    animation: right 1s infinite ease-in-out;
}
@-webkit-keyframes right {
    0% {
            -webkit-transform: translate(-15px);
    }
    50% {
            -webkit-transform: translate(15px);
    }
    100% {
            -webkit-transform: translate(-15px);
    }
}
@-webkit-keyframes left {
    0% {
            -webkit-transform: translate(15px);
    }
    50% {
            -webkit-transform: translate(-15px);
    }
    100% {
            -webkit-transform: translate(15px);
    }
}
@-moz-keyframes right {
    0% {
            -moz-transform: translate(-15px);
    }
    50% {
            -moz-transform: translate(15px);
    }
    100% {
            -moz-transform: translate(-15px);
    }
}
@-moz-keyframes left {
    0% {
            -moz-transform: translate(15px);
    }
    50% {
            -moz-transform: translate(-15px);
    }
    100% {
            -moz-transform: translate(15px);
    }
}
@keyframes right {
    0% {
            transform: translate(-15px);
    }
    50% {
            transform: translate(15px);
    }
    100% {
            transform: translate(-15px);
    }
}
@keyframes left {
    0% {
            transform: translate(15px);
    }
    50% {
            transform: translate(-15px);
    }
    100% {
            transform: translate(15px);
    }
}
ログイン後にコピー
#作者: Richie

プロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！#9.「接着剤」の読み込み

各円は接着され、分割されて接着効果が形成されます

<!-- loading.html -->
<div class="loading">
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="6.3" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 14 -4" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>
ログイン後にコピー
/* loading.css */
.loading {
  width: 166px;
  height: 166px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-filter: url("#goo");
  filter: url("#goo");
}
.loading span {
  width: 100%;
  text-align: center;
  color: #e04960;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
  position: absolute;
  left: 1px;
  top: 46%;
}
.loading:before, .loading:after {
  content: &#39;&#39;;
  border-radius: 50%;
  background-color: #e04960;
  width: 26px;
  height: 26px;
  position: absolute;
  left: 72px;
  top: 8px;
  animation: rotate 6s linear;
  animation-iteration-count: infinite;
  transform-origin: 12px 76px;
}
.loading:before {
  box-shadow: 45px 19px 0px 0px #e04960, 62px 63px 0px 0px #e04960, 45px 107px 0px 0px #e04960, 0px 126px 0px 0px #e04960, -46px 107px 0px 0px #e04960, -63px 63px 0px 0px #e04960, -46px 19px 0px 0px #e04960;
}
.loading:after {
  animation-direction: reverse;
}
@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(-360deg); }
}
ログイン後にコピー

Author: Dicson

プロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！10. 「衝突に対するブロック」loading

ディスプレイスメントを賢く使用すると、次のようなこともできます。衝突と押し出しのエフェクトを作成する

#
<!-- loading.html -->
<div class="loading">
  <div class="loading-square"></div>
  <div class="loading-square"></div>
  <div class="loading-square"></div>
  <div class="loading-square"></div>
</div>
ログイン後にコピー
/* loading.css */
.loader {
  display: block;
  position: relative;
  height: 20px;
  width: 86px;
}
.loading-square {
  position: absolute;
  height: 20px;
  width: 20px;
  top: 0;
}
.loading-square:nth-child(1) {
  left: 0;
  animation: square1 1.5s linear forwards infinite;
}
.loading-square:nth-child(2) {
  left: 22px;
  animation: square2 1.5s linear forwards infinite;
}
.loading-square:nth-child(3) {
  left: 44px;
  animation: square3 1.5s linear forwards infinite;
}
.loading-square:nth-child(4) {
  left: 66px;
  animation: square4 1.5s linear forwards infinite;
}
@keyframes square1 {
  0% {
    background-color: #97c900;
    transform: translate(0, 0);
  }
  9.09091% {
    transform: translate(0, calc(-100% - 2px));
    background-color: #97c900;
  }
  18.18182% {
    transform: translate(calc(100% + 2px), calc(-100% - 2px));
    background-color: #15668a;
  }
  27.27273% {
    transform: translate(calc(100% + 2px), 0);
  }
  100% {
    background-color: #15668a;
    transform: translate(calc(100% + 2px), 0);
  }
}
@keyframes square2 {
  0% {
    background-color: #15668a;
    transform: translate(0, 0);
  }
  18.18182% {
    transform: translate(0, 0);
  }
  27.27273% {
    transform: translate(0, calc(100% + 2px));
    background-color: #15668a;
  }
  36.36364% {
    transform: translate(calc(100% + 2px), calc(100% + 2px));
    background-color: #D53A33;
  }
  45.45455% {
    transform: translate(calc(100% + 2px), 0);
  }
  100% {
    background-color: #D53A33;
    transform: translate(calc(100% + 2px), 0);
  }
}
@keyframes square3 {
  0% {
    background-color: #D53A33;
    transform: translate(0, 0);
  }
  36.36364% {
    transform: translate(0, 0);
  }
  45.45455% {
    transform: translate(0, calc(-100% - 2px));
    background-color: #D53A33;
  }
  54.54545% {
    transform: translate(calc(100% + 2px), calc(-100% - 2px));
    background-color: #E79C10;
  }
  63.63636% {
    transform: translate(calc(100% + 2px), 0);
  }
  100% {
    background-color: #E79C10;
    transform: translate(calc(100% + 2px), 0);
  }
}
@keyframes square4 {
  0% {
    transform: translate(0, 0);
    background-color: #E79C10;
  }
  54.54545% {
    transform: translate(0, 0);
  }
  63.63636% {
    transform: translate(0, calc(100% + 2px));
    background-color: #E79C10;
  }
  72.72727% {
    background-color: #D53A33;
  }
  81.81818% {
    background-color: #15668a;
  }
  90.90909% {
    transform: translate(calc(-300% - 6px), calc(100% + 2px));
    background-color: #97c900;
  }
  100% {
    transform: translate(calc(-300% - 6px), 0);
    background-color: #97c900;
  }
}
ログイン後にコピー

著者: Paul Grant

11. 「スイッチ」 " 読み込み中プロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！

#Switch を使用している学生はよく知っているはずです。これは eshop での読み込みです

# 
<!-- loading.html -->
<div class="load">
  <div class="loading">
    <div class="loader__bar"></div>
    <div class="loader__bar loader__bar--delay-1"></div>
    <div class="loader__bar loader__bar--delay-2"></div>
    <div class="loader__bar loader__bar--delay-3"></div>
    <div class="loader__bar loader__bar--delay-4"></div>
    <div class="loader__bar loader__bar--delay-5"></div>
    <div>
  </div>
</div>
ログイン後にコピー
/* loading.css */
.load{
  width: 400px;
  height: 170px;
}
@keyframes loader {
  0%{
    background: #FF8919;
    width:0%;
  }20%{
    width:100%;
  }39%{
    background: #FF8919;
  }40%{
    background: #FFA54F;
    width: 0%
  }60%{
    width: 100%;
  }80%{
    width:0%;
  }100%{
    background: #FFA54F;
    width: 0%;
  }
}
@keyframes loaderAlt {
  0%{
    background: #FF7C00;
    width:100%;
  }19%{
    background: #FF7C00;
  }20%{
    background: #FF9834;
    width: 0%;
  }40%{
    width: 100%;
  }59%{
    background: #FF9834;
  }60%{
    background: #FF7C00;
    width: 0;
  }80%{
    width: 100%;
  }100%{
    background: #FF7C00;
    width: 100%
  }
}
.loading{
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  width: 100%;
}
.loader__bar{
  display: flex;
  flex: 1;
  position: relative;
  width: 100%;
}
.loader__bar:before{
  animation: loader ease 8s infinite;
  animation-delay: 100ms;
  background: #FF7C00;
  background-size: 200% 200%;
  content: "";
  height:100%;
  width: 0%;
}
.loader__bar:after{
  animation: loaderAlt ease 8s infinite;
  animation-delay: 100ms;
  background: #FF7C00;
  background-size: 200% 200%;
  content: "";
  height: 100%;
  width: 100%;
}
.loader__bar--delay-1:before,
.loader__bar--delay-1:after{
  animation-delay: 200ms;
}
.loader__bar--delay-2:before,
.loader__bar--delay-2:after{
  animation-delay: 300ms;
}
.loader__bar--delay-3:before,
.loader__bar--delay-3:after{
  animation-delay: 400ms;
}
.loader__bar--delay-4:before,
.loader__bar--delay-4:after{
  animation-delay: 500ms;
}
.loader__bar--delay-5:before,
.loader__bar--delay-5:after{
  animation-delay: 600ms;
}
ログイン後にコピー
著者: Steve Meredith

プログラミング関連の知識については、プログラミング入門

をご覧ください。 ！

以上がプロジェクトを輝かせる 10 個以上の CSS 読み込みエフェクト、ぜひ集めてください! ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前 By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.チャットコマンドとそれらの使用方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7519
15
CakePHP チュートリアル
1378
52
Steamのアカウント名の形式は何ですか
81
11
Win11 Activation Key Permanent
54
19
NYTの接続はヒントと回答です
21
68
もっと見る
Related knowledge
ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

HTML、CSS、およびJavaScriptの役割：コアの責任 HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップの日付を表示する方法 ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

See all articles