纯css加载指示器-仿苹果

最新推荐文章于 2024-08-10 07:13:53 发布
最新推荐文章于 2024-08-10 07:13:53 发布
阅读量436 收藏
点赞数
分类专栏： web前端 文章标签： scss css 加载指示器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012615439/article/details/92797386
版权

html结构

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

scss

@for $i from 0 through 12 {
  @keyframes opacity-60-25-#{$i}-13 {
    0% {
      opacity: if($i <= 5, 0.25, ($i - 5)*0.09 + 1/3);
    }
    #{(1/13 * $i +0.001) * 100%} {
      opacity: 0.25;
    }
    #{(1/13 * $i +0.002) * 100%} {
      opacity: 1;
    }
    #{(1/13 * $i +0.001) * 100%} {
      opacity: 0.25;
    }
    100% {
      opacity: if($i <= 5, 0.25, ($i - 5)*0.09 + 1/3);
    }
  }
}
.loading{
  position: absolute;
  width: 0px;
  z-index: 2000000000;
  left: 50%;
  top: 50%;
  @for $i from 0 through 12{
    >div:nth-child(#{$i + 1}){
      position: absolute;
      top: -1px;
      opacity: 0.25;
      animation: opacity-60-25-#{$i}-13 1s linear 0s infinite normal none running;
      div{
        position: absolute;
        width: 8.5px;
        height: 2.25px;
        background: rgb(0, 0, 0);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
        transform-origin: left center 0px;
        transform: rotate(#{$i*360/13}deg) translate(5px, 0px);
        border-radius: 1px;
      }
    }
  }
}

编译后css

@-webkit-keyframes opacity-60-25-0-13 {
  0% {
    opacity: 0.25;
  }
  0.1% {
    opacity: 0.25;
  }
  0.2% {
    opacity: 1;
  }
  0.1% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes opacity-60-25-0-13 {
  0% {
    opacity: 0.25;
  }
  0.1% {
    opacity: 0.25;
  }
  0.2% {
    opacity: 1;
  }
  0.1% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-1-13 {
  0% {
    opacity: 0.25;
  }
  7.7923076923% {
    opacity: 0.25;
  }
  7.8923076923% {
    opacity: 1;
  }
  7.7923076923% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes opacity-60-25-1-13 {
  0% {
    opacity: 0.25;
  }
  7.7923076923% {
    opacity: 0.25;
  }
  7.8923076923% {
    opacity: 1;
  }
  7.7923076923% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-2-13 {
  0% {
    opacity: 0.25;
  }
  15.4846153846% {
    opacity: 0.25;
  }
  15.5846153846% {
    opacity: 1;
  }
  15.4846153846% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes opacity-60-25-2-13 {
  0% {
    opacity: 0.25;
  }
  15.4846153846% {
    opacity: 0.25;
  }
  15.5846153846% {
    opacity: 1;
  }
  15.4846153846% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-3-13 {
  0% {
    opacity: 0.25;
  }
  23.1769230769% {
    opacity: 0.25;
  }
  23.2769230769% {
    opacity: 1;
  }
  23.1769230769% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes opacity-60-25-3-13 {
  0% {
    opacity: 0.25;
  }
  23.1769230769% {
    opacity: 0.25;
  }
  23.2769230769% {
    opacity: 1;
  }
  23.1769230769% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-4-13 {
  0% {
    opacity: 0.25;
  }
  30.8692307692% {
    opacity: 0.25;
  }
  30.9692307692% {
    opacity: 1;
  }
  30.8692307692% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes opacity-60-25-4-13 {
  0% {
    opacity: 0.25;
  }
  30.8692307692% {
    opacity: 0.25;
  }
  30.9692307692% {
    opacity: 1;
  }
  30.8692307692% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-5-13 {
  0% {
    opacity: 0.25;
  }
  38.5615384615% {
    opacity: 0.25;
  }
  38.6615384615% {
    opacity: 1;
  }
  38.5615384615% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes opacity-60-25-5-13 {
  0% {
    opacity: 0.25;
  }
  38.5615384615% {
    opacity: 0.25;
  }
  38.6615384615% {
    opacity: 1;
  }
  38.5615384615% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-6-13 {
  0% {
    opacity: 0.4233333333;
  }
  46.2538461538% {
    opacity: 0.25;
  }
  46.3538461538% {
    opacity: 1;
  }
  46.2538461538% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.4233333333;
  }
}
@keyframes opacity-60-25-6-13 {
  0% {
    opacity: 0.4233333333;
  }
  46.2538461538% {
    opacity: 0.25;
  }
  46.3538461538% {
    opacity: 1;
  }
  46.2538461538% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.4233333333;
  }
}
@-webkit-keyframes opacity-60-25-7-13 {
  0% {
    opacity: 0.5133333333;
  }
  53.9461538462% {
    opacity: 0.25;
  }
  54.0461538462% {
    opacity: 1;
  }
  53.9461538462% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.5133333333;
  }
}
@keyframes opacity-60-25-7-13 {
  0% {
    opacity: 0.5133333333;
  }
  53.9461538462% {
    opacity: 0.25;
  }
  54.0461538462% {
    opacity: 1;
  }
  53.9461538462% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.5133333333;
  }
}
@-webkit-keyframes opacity-60-25-8-13 {
  0% {
    opacity: 0.6033333333;
  }
  61.6384615385% {
    opacity: 0.25;
  }
  61.7384615385% {
    opacity: 1;
  }
  61.6384615385% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.6033333333;
  }
}
@keyframes opacity-60-25-8-13 {
  0% {
    opacity: 0.6033333333;
  }
  61.6384615385% {
    opacity: 0.25;
  }
  61.7384615385% {
    opacity: 1;
  }
  61.6384615385% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.6033333333;
  }
}
@-webkit-keyframes opacity-60-25-9-13 {
  0% {
    opacity: 0.6933333333;
  }
  69.3307692308% {
    opacity: 0.25;
  }
  69.4307692308% {
    opacity: 1;
  }
  69.3307692308% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.6933333333;
  }
}
@keyframes opacity-60-25-9-13 {
  0% {
    opacity: 0.6933333333;
  }
  69.3307692308% {
    opacity: 0.25;
  }
  69.4307692308% {
    opacity: 1;
  }
  69.3307692308% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.6933333333;
  }
}
@-webkit-keyframes opacity-60-25-10-13 {
  0% {
    opacity: 0.7833333333;
  }
  77.0230769231% {
    opacity: 0.25;
  }
  77.1230769231% {
    opacity: 1;
  }
  77.0230769231% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.7833333333;
  }
}
@keyframes opacity-60-25-10-13 {
  0% {
    opacity: 0.7833333333;
  }
  77.0230769231% {
    opacity: 0.25;
  }
  77.1230769231% {
    opacity: 1;
  }
  77.0230769231% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.7833333333;
  }
}
@-webkit-keyframes opacity-60-25-11-13 {
  0% {
    opacity: 0.8733333333;
  }
  84.7153846154% {
    opacity: 0.25;
  }
  84.8153846154% {
    opacity: 1;
  }
  84.7153846154% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.8733333333;
  }
}
@keyframes opacity-60-25-11-13 {
  0% {
    opacity: 0.8733333333;
  }
  84.7153846154% {
    opacity: 0.25;
  }
  84.8153846154% {
    opacity: 1;
  }
  84.7153846154% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.8733333333;
  }
}
@-webkit-keyframes opacity-60-25-12-13 {
  0% {
    opacity: 0.9633333333;
  }
  92.4076923077% {
    opacity: 0.25;
  }
  92.5076923077% {
    opacity: 1;
  }
  92.4076923077% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.9633333333;
  }
}
@keyframes opacity-60-25-12-13 {
  0% {
    opacity: 0.9633333333;
  }
  92.4076923077% {
    opacity: 0.25;
  }
  92.5076923077% {
    opacity: 1;
  }
  92.4076923077% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.9633333333;
  }
}
.loading {
  position: absolute;
  width: 0px;
  z-index: 2000000000;
  left: 50%;
  top: 50%;
}
.loading > div:nth-child(1) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-0-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-0-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(1) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(0deg) translate(5px, 0px);
          transform: rotate(0deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(2) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-1-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-1-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(2) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(27.6923076923deg) translate(5px, 0px);
          transform: rotate(27.6923076923deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(3) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-2-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-2-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(3) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(55.3846153846deg) translate(5px, 0px);
          transform: rotate(55.3846153846deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(4) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-3-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-3-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(4) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(83.0769230769deg) translate(5px, 0px);
          transform: rotate(83.0769230769deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(5) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-4-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-4-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(5) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(110.7692307692deg) translate(5px, 0px);
          transform: rotate(110.7692307692deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(6) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-5-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-5-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(6) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(138.4615384615deg) translate(5px, 0px);
          transform: rotate(138.4615384615deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(7) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-6-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-6-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(7) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(166.1538461538deg) translate(5px, 0px);
          transform: rotate(166.1538461538deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(8) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-7-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-7-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(8) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(193.8461538462deg) translate(5px, 0px);
          transform: rotate(193.8461538462deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(9) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-8-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-8-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(9) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(221.5384615385deg) translate(5px, 0px);
          transform: rotate(221.5384615385deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(10) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-9-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-9-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(10) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(249.2307692308deg) translate(5px, 0px);
          transform: rotate(249.2307692308deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(11) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-10-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-10-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(11) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(276.9230769231deg) translate(5px, 0px);
          transform: rotate(276.9230769231deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(12) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-11-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-11-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(12) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(304.6153846154deg) translate(5px, 0px);
          transform: rotate(304.6153846154deg) translate(5px, 0px);
  border-radius: 1px;
}
.loading > div:nth-child(13) {
  position: absolute;
  top: -1px;
  opacity: 0.25;
  -webkit-animation: opacity-60-25-12-13 1s linear 0s infinite normal none running;
          animation: opacity-60-25-12-13 1s linear 0s infinite normal none running;
}
.loading > div:nth-child(13) div {
  position: absolute;
  width: 8.5px;
  height: 2.25px;
  background: black;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
  -webkit-transform-origin: left center 0px;
          transform-origin: left center 0px;
  -webkit-transform: rotate(332.3076923077deg) translate(5px, 0px);
          transform: rotate(332.3076923077deg) translate(5px, 0px);
  border-radius: 1px;
}

自定义Vue加载组件

<template>
    <div class="loading-template">
        <div class="loading" v-show="isShow">
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Loading",
        data() {
            return {
                isShow:false
            }
        },
        methods:{
            showLoad(){
                this.isShow = true;
                this.promise = new Promise((resolve, reject) => {
                    this.resolve = resolve;
                    this.reject = reject;
                });
                return this.promise;
            },
            hideLoad() {
                setTimeout(() => {
                    this.destroy();
                }, 300);
            },
            destroy() {
                this.$destroy();
                document.body.removeChild(this.$el);
            }
        }
    }
</script>
import loadingTemplate from './components/Loading'
let Loading = {
    install:function(Vue, options){
        const LoadingInit = Vue.extend(loadingTemplate);
        let currentLoad;
        const initInstance = () => {
            // 实例化vue实例
            currentLoad = new LoadingInit();
            let msgBoxEl = currentLoad.$mount().$el;
            document.body.appendChild(msgBoxEl);
        };
        Vue.prototype.$loading = {
            show(options){
                if(!currentLoad){
                    initInstance();
                }
                if(Object.prototype.toString.call(options) === "[object Object]"){
                    Object.asign(currentLoad,options);
                }
                return currentLoad.showLoad()
                    .then(val=>{
                        currentLoad = null;
                        return Promise.resolve();
                    })
                    .catch(err=>{
                        currentLoad = null;
                        return Promise.reject();
                    })
            },
            hide(){
                if(currentLoad){
                    currentLoad.hideLoad();
                    currentLoad = null;
                }
            }
        }
    }
}
export default Loading

 

Super苹果核
关注
专栏目录
纯css3 加载loading动画特效
络庆钟朔专栏
11-23 3029
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading，本来是想做个图片提示的，但是图片如果放大电脑的分辨率就会感觉到很虚，体验效果很不好。于是就采用css3+js实现这个loading的动画效果，最终在我们前端工程师的帮助之下完成。所以记录在这里，如果感兴趣的朋友也可以看看，大家互相焦炉学习。 1、demo.html 纯css3 加载loading动画特效
基于html的美食网站——速鲜站餐饮食品(HTML+CSS+JavaScript)--水果超市(响应式)2页
而风不止
11-21 179
在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
很漂亮的仿苹果的导航条
07-16
一个很漂亮的仿苹果的导航条，效果仿的很逼真的说。。。
css tab 带指示器
泛酸的桂花酒
01-08 397
【代码】css tab 带指示器。
探索CSS Spinners：简洁高效的加载指示器库
最新发布
gitblog_00087的博客
08-10 437
探索CSS Spinners：简洁高效的加载指示器库 css-spinnersSimple CSS spinners and throbbers made with CSS and minimal HTML markup.项目地址:https://gitcode.com/gh_mirrors/cs/css-spinners 在现代网页开发中，加载指示器是提升用户体验不可或缺的元素。它们不仅能够告...
将加载指示器添加到您的Vue.js应用程序
culiu9261的博客
07-22 335
Loading indicators improve UX (user experience) in any application web or mobile. It tells the user that an action is being carried and a result will return shortly. 加载指示器可改善任何应用程序Web或移动设备中的UX（用户体验）。...
推荐一款纯CSS进度指示器：CSS Progress Wizard
gitblog_00061的博客
06-20 314
推荐一款纯CSS进度指示器：CSS Progress Wizard css-progress-wizard[NOT MAINTAINED] A pure flexbox+sass progress indicator项目地址:https://gitcode.com/gh_mirrors/cs/css-progress-wizard 1. 项目介绍 在Web开发中，进度指示器是不可或缺的元素之一，...
Mac苹果CSS用户登录模板是一款设计效果不错的用户前台后台登录模板下载。.zip
02-17
例如，可以使用CSS3的过渡（transition）和动画（animation）来实现按钮按下时的微小变形、输入框获取焦点时的高亮效果，以及加载指示器的平滑转动等。此外，利用CSS3的媒体查询（media query）功能，该模板还具备...
请求加载对话框
04-12
在iOS系统中，苹果公司设计了一种优雅且用户体验极佳的加载等待对话框，这种对话框通常被称为“活动指示器”或“菊花加载”（ActivityIndicatorView）。本篇文章将深入探讨如何在非苹果平台，如Android或Web应用中，...
jQuery+CSS3仿IOS5通知中心特效代码
03-20
【jQuery+CSS3仿IOS5通知中心特效代码】是一个典型的前端开发项目，它结合了JavaScript库jQuery和CSS3技术，来实现与苹果iOS5操作系统中通知中心类似的动态效果。这个项目旨在为网页添加一个功能丰富的下拉通知界面...
仿照ios的loading
04-21
仿ios的loading动画
VUE加载按钮-:backhand_index_pointing_down:带有滑出加载指示器的直接按钮-Vue.js开发
05-27
vue-loading-button带有滑出式加载指示器的Vue按钮直截了当道具属性类型必需默认设置描述布尔值false false否否启用有效的示例样式安装通过运行以下命令从npm安装软件包：$ npm i vue-loading-button或$ yarn add vue-loading-button用法导入，注册组件并将其放置在Vue应用程序中。
仿京东轮播指示器
12-03
仿京东首页轮播指示器，主要通过自定义view来实现，轮播用的banner
带loading指示器的js提交按钮动画特效
01-17
Ladda是一款内置Loading指示器和进度条的提交js按钮特效插件。该js按钮特效用于制作提交按钮，在点击按钮后，按钮上会出现无限循环的Loading指示器和加载进度条效果。这种设计大大增强了用户的体验性。
纯文本Loading加载指示器特效
07-05
纯文本Loading加载指示器特效
【flutter】加载指示器（loading indicator）阻止用户在某个操作执行期间操作页面
weixin_45055317的博客
02-27 590
在Flutter中，通过显示一个加载指示器（loading indicator）来阻止用户在某个操作执行期间操作页面。在模拟的操作完成后（这里用。，加载指示器消失，用户可以继续操作页面。在这个示例中，当用户点击按钮时，会触发。方法，在这个方法中设置。
CSS滚动指示器
weixin_45221036的博客
07-01 502
一、CSS滚动指示器 滚动指示器指的是页面的顶端会有一个进度条，指示滚动的进度。效果如下GIF所示（点击播放）： CSS滚动指示器指的是不借助JavaScript，纯CSS实现滚动进度效果。 二、传统的实现方法 传统CSS实现方法由一个名叫 Mike的人首先提出，时间应该是16年，这个CodePen目前已经有十几万的访问量：CSS only scroll indicator 传统的CSS实现非常有创意，具体原理如下。 在body标签上写一个对角的线性渐变，然后用一个白色的固定定位的浮层覆盖在上面，CSS代
纯CSS滚动指示器技术实现
小白的博客
07-30 453
<style> body { position: relative; } .indicator { height: 1900px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: linear-gradient(to right top, te...
简易CSS加载插件require-css.js for require.js与vuejs
在创建CSS链接元素并设置其属性后，代码会根据是否存在`loadCallback`来决定是否添加`onload`和`onerror`事件监听器，以便在CSS加载成功或失败时调用回调函数。最后，将新创建的CSS链接元素插入到指定的父元素中。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值