Home / Questions / 125991
Accepted
Pedro
Asked: 2020-12-20 18:07:06 +0800 CST 2020-12-20 18:07:06 +0800 CST

How to animate the loader?

  • 772

I have designed a loader but how do I make it animate?

.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #fff;
    top: 0px;
    left: 0px;
    z-index: 99999;
}

.loader {
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    margin: 23% auto 0 auto;
    font-size: 12px;
}

.spinner {
    border: 2px solid #eeeeee;
    font-size: 40px;
    width: 1em;
    height: 1em;
    border-radius: .5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

.spinner {
    border-top-color: #417b03;
}
<div class="mask" style="display: block;">
  <div class="loader">
    <div class="spinner"></div>
     Procesando...
  </div>
</div>

css3

1 Answers

  1. Best Answer

    You can create a CSS animation using @keyframeswhere 0%is the start of the animation and 100%is the end state of the animation, and the property we are going to animate istransform: rotate()

    Once the animation is created you can assign it to the event using the property animationwhose first parameter is the name that you have given to the animation followed by the duration time, the type of animation and the loopone that in this case we will do infinite.

    You can see much more information in Using CSS animations

    functional example

    .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #fff;
    top: 0px;
    left: 0px;
    z-index: 99999;
}

.loader {
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    margin: 23% auto 0 auto;
    font-size: 12px;
}

.spinner {
    border: 2px solid #eeeeee;
    font-size: 40px;
    width: 1em;
    height: 1em;
    border-radius: .5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: rotar 1s linear infinite;
    -moz-animation: rotar 1s linear infinite;
    animation: rotar 1s linear infinite;
}

.spinner {
    border-top-color: #417b03;
}

@keyframes rotar {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
    <div class="mask" style="display: block;">
  <div class="loader">
    <div class="spinner"></div>
     Procesando...
  </div>
</div>

    • 1