multiple-style-loaders
Reactive icon

Multi Style Loaders 

version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 18 February 2023
 by 
5.0
 (11 ratings)
multiple-style-loaders

Multi Style Loaders 

Documentation
1.0.0

I am including CSS In case you want to Customize it:


.C-Loeader

  span {

    display: block;

    width: 70px;

    height: 70px;

    border: 3px solid;

    border-radius: 50%;

    border-color: transparent #000 #000;

    animation: cssload-spin 690ms infinite linear;}

    @keyframes cssload-spin {

      100% {

        transform: rotate(360deg);

        transform: rotate(360deg);

      }

    }

  

.C-Loeader{

    width: fit-content;

}



// Bouncing Ball

.circle {

  display: inline-block;

  background-color: #000;

  height: 15px;

  width: 15px;

  border-radius: 25px;

}

.BounceballWrapper {

width: fit-content;

}

.ball-1{

  animation-name: bounce;

  animation-delay: 1s;

  animation-duration: 1.2s;

  animation-iteration-count: infinite;

}

.ball-2{

  animation-name: bounce;

  animation-delay: 1.1s;

  animation-duration: 1.2s;

  animation-iteration-count: infinite;

}

.ball-3{

  animation-name: bounce;

  animation-delay: 1.2s;

  animation-duration: 1.2s;

  animation-iteration-count: infinite;

}

@keyframes bounce {

  0% {

    transform: translateY(0);

  }

  40% {

    transform: translateY(23px);

  }

  60% {

    transform: translateY(-25px);

  }

  80%{

    transform: translateY(0);

  }

}


/--------------------------------------------------------End of description-----------------------------------------------------/