Loader by Subaashbala
#e8e8e8
1.loaderViewPort { 2 width: 15rem; /* Background circle around the dice */ 3 aspect-ratio: 1; 4 border-radius: 50%; 5 perspective: 1000px; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 border: 4px solid black; 10 animation: changeColor 5s ease infinite; 11} 12.loader { 13 /* Container for the dice*/ 14 display: flex; 15 justify-content: center; 16 align-items: center; 17 transform: rotateX(90deg); 18 transform-style: preserve-3d; 19 animation: revolve 5s ease infinite; 20} 21.dot { 22 width: 1rem; 23 aspect-ratio: 1; 24 background-color: black; 25 border-radius: 50%; 26} 27.dotContainer { 28 /* Flexbox to arrange dots horizontally */ 29 width: 100%; 30 height: 100%; 31 display: flex; 32 justify-content: space-around; 33 align-items: center; 34} 35.subDotContainer { 36 /* Flexbox to arrange dots vertically */ 37 height: 100%; 38 display: flex; 39 flex-direction: column; 40 justify-content: space-around; 41} 42.left .dotContainer { 43 transform: rotate(45deg); 44} 45.side { 46 /* Actual sides of the dice */ 47 background-color: rgba(255, 255, 255, 1); 48 padding: 1rem; 49 position: absolute; 50 width: 6em; /* Varying this will vary the Dice's size */ 51 aspect-ratio: 1; 52 display: flex; 53 justify-content: center; 54 align-items: center; 55 border: 4px solid black; 56} 57.front { 58 transform: translateZ(3rem); 59} 60.back { 61 transform: translateZ(-3rem); 62} 63.back .dotContainer { 64 transform: rotate(-45deg); 65} 66.left { 67 transform: rotateY(90deg) translateZ(3rem); 68} 69.right { 70 transform: rotateY(90deg) translateZ(-3rem); 71} 72.bottom { 73 transform: translateY(3rem) rotateX(90deg); 74} 75.top { 76 transform: translateY(-3rem) rotateX(90deg); 77} 78@keyframes revolve { 79 0% { 80 transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) 81 rotate3d(0, 0, 1, 0deg); 82 } 83 20% { 84 transform: rotate3d(1, 0, 0, 72deg) rotate3d(0, 1, 0, 72deg) 85 rotate3d(0, 0, 1, 72deg); 86 } 87 40% { 88 transform: rotate3d(1, 0, 0, 148deg) rotate3d(0, 1, 0, 148deg) 89 rotate3d(0, 0, 1, 148deg); 90 } 91 60% { 92 transform: rotate3d(1, 0, 0, 216deg) rotate3d(0, 1, 0, 216deg) 93 rotate3d(0, 0, 1, 216deg); 94 } 95 80% { 96 transform: rotate3d(1, 0, 0, 288deg) rotate3d(0, 1, 0, 288deg) 97 rotate3d(0, 0, 1, 288deg); 98 } 99 100% { 100 transform: rotate3d(1, 0, 0, 360deg) rotate3d(0, 1, 0, 360deg) 101 rotate3d(0, 0, 1, 360deg); 102 } 103} 104@keyframes changeColor { 105 0% { 106 background-color: #00dfa2; 107 } 108 20% { 109 background-color: #f72798; 110 } 111 40% { 112 background-color: #f57d1f; 113 } 114 60% { 115 background-color: #16ff00; 116 } 117 80% { 118 background-color: #ff004d; 119 } 120 100% { 121 background-color: #00dfa2; 122 } 123} 124
877 views
Variations
1 MIT License