CSS Loading加载动画

下载代码

html

css

分享到微信朋友圈

html

css

/* ***** Colors - Start ***** */
/* ***** Colors - End ***** */
/* ***** Dimensions - Start ***** */
/* ***** Dimensions - End ***** */
/* ***** Global Styles - Start ***** */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #111;
}

.loader-2 .shape-1, .loader-3 .shape-1, .loader-2 .shape-2, .loader-3 .shape-2, .loader-2 .shape-3, .loader-3 .shape-3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-1 .shape-1, .loader-1 .shape-2, .loader-1 .shape-3 {
  width: 25px;
  height: 10px;
  border-radius: 20px;
  margin-right: 25px;
}
.loader-1 .shape-1:first-child, .loader-1 .shape-2:first-child, .loader-1 .shape-3:first-child {
  margin-right: 0;
}
.loader-1 .shape-1:last-child, .loader-1 .shape-2:last-child, .loader-1 .shape-3:last-child {
  margin-right: 0;
}

.loader-2 .shape-1, .loader-3 .shape-1, .loader-2 .shape-2, .loader-3 .shape-2, .loader-2 .shape-3, .loader-3 .shape-3 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 5px 5px 0 0;
}

.loader-4 .line-1, .loader-4 .line-2, .loader-4 .line-3 {
  width: 50px;
  height: 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.loader-4 .line-1:last-child, .loader-4 .line-2:last-child, .loader-4 .line-3:last-child {
  margin-bottom: 0;
}

.loader-2, .loader-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loader-2 .shape-1, .loader-3 .shape-1 {
  background-color: #f5e82f;
}
.loader-2 .shape-2, .loader-3 .shape-2 {
  background-color: #a6e630;
  margin-right: 0;
}
.loader-2 .shape-3, .loader-3 .shape-3 {
  background-color: #4cb8f5;
  margin: 0;
}

/* ***** Global Styles - End ***** */
/* ***** Specific Styles - Start ***** */
.container {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 100vh;
}

.shape-wrapper {
  display: flex;
}

.loader-1 {
  display: flex;
}
.loader-1 .shape-1 {
  background-color: #f5e82f;
}
.loader-1 .shape-2 {
  background-color: #a6e630;
}
.loader-1 .shape-3 {
  background-color: #4cb8f5;
}

.loader-2 .shape-3 {
  width: 75px;
  margin-left: 5px;
  border-radius: 50% 50% 50% 50%/0% 0% 100% 100%;
}

.loader-4 .line-1 {
  width: calc(50px - 10px);
  background-color: #f5e82f;
}
.loader-4 .line-2 {
  background-color: #a6e630;
}
.loader-4 .line-3 {
  width: calc(50px / 2);
  background-color: #4cb8f5;
}

/* ***** Specific Styles - End ***** */

JavaScript

// ***** Loader 1 Animation - Start *****
const loader1 = new TimelineMax({ repeat: -1 });
const loader1Duration = 0.5;
loader1
  .to(".loader-1 .shape-1", loader1Duration, { rotate: 360, transformOrigin: "center left" })
  .to(".loader-1 .shape-2", loader1Duration, { rotate: -180, transformOrigin: "center right" })
  .to(".loader-1 .shape-3", loader1Duration, { rotate: 360, transformOrigin: "center right" })
  .to(".loader-1 .shape-2", loader1Duration, { rotate: -360, transformOrigin: "center right" })
// ***** Loader 1 Animation - End *****

// ***** Loader 2 Animation - Start *****
const loader2 = new TimelineMax({ repeat: -1, yoyo: true });
const loader2Duration = 0.5;
loader2
  .to(".loader-2 .shape-1", loader2Duration, { translateX: -10, translateY: -10, scale: 0.7 }, 0)
  .to(".loader-2 .shape-2", loader2Duration, { translateX: 20, translateY: -10, scale: 0.7 }, 0)
  .to(".loader-2 .shape-3", loader2Duration, { translateY: 10, scale: 0.7 }, 0)
// ***** Loader 2 Animation - End *****

// ***** Loader 3 Animation - Start *****
const loader3 = new TimelineMax({ repeat:-1, yoyo: true });
const loader3Duration = 1;
loader3
  .to(".loader-3", loader3Duration, { ease: "back", rotate: 360 })
  .to(".loader-3 .shape-1", { translateX: -30, translateY: -30, scale: 0.7 }, 0)
  .to(".loader-3 .shape-2", { translateX: 30, translateY: -30, scale: 0.7 }, 0)
  .to(".loader-3 .shape-3", { translateY: 30, scale: 0.7 }, 0)
// ***** Loader 3 Animation - End *****

// ***** Loader 4 Animation - Start *****
const loader4 = new TimelineMax({ repeat:-1, yoyo: true });
const loader4Line1 = new TimelineMax();
const loader4Line2 = new TimelineMax();
const loader4Line3 = new TimelineMax();

loader4
  .fromTo(".loader-4 .line-1",{ translateX: -50 }, { translateX: 50 })
   .fromTo(".loader-4 .line-2",{ translateX: -20 }, { translateX: 20 }, 0)
  .fromTo(".loader-4 .line-3",{ translateX: -50 }, { translateX: 40 }, 0)
// ***** Loader 4 Animation - End *****

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg