Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- #loading{
- background: #333;
- color: #fff;
- font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
- position: fixed;
- z-index: 5;
- width: 100%;
- height: 100%;
- background: #333;
- display: none;
- }
- #loading h3{
- top: 60%;
- left: 50%;
- z-index: 7;
- position: fixed;
- display: block;
- transform: translateX(-50%);
- }
- .loadingStyle{
- z-index: 6;
- display: flex;
- justify-content: space-around;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- position: fixed;
- width: 70%;
- height: 70%;
- }
- .loadingStyle-bar{
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background: #fff;
- position: fixed;
- top: 50%;
- transform: translate(-50%,-50%);
- animation-name: bounding;
- animation-duration: 1.8s;
- animation-iteration-count: infinite;
- }
- .loadingStyle-bar:nth-child(1){
- left: 5%;
- animation-delay: 0s;
- }
- .loadingStyle-bar:nth-child(2){
- left: 50%;
- animation-delay: 0.4s;
- }
- .loadingStyle-bar:nth-child(3){
- left: 95%;
- animation-delay: 0.8s;
- }
- @keyframes bounding{
- 0%{
- width: 20px;
- height: 20px;
- }
- 50%{
- width: 50px;
- height: 50px;
- }
- 100%{
- width: 20px;
- height: 20px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement