App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<template> <div id="app"> <!-- Different spinner components from epic-spinners --> <atom-spinner :animation-duration="1000" :size="60" :color="'#ff1d5e'" /> <flower-spinner :animation-duration="2500" :size="70" :color="'#ff1d5e'" /> <pixel-spinner :animation-duration="2000" :pixel-size="70" :color="'#ff1d5e'" /> <hollow-dots-spinner :animation-duration="1000" :dot-size="15" :dots-num="3" :color="'#ff1d5e'" /> <intersecting-circles-spinner :animation-duration="1200" :size="70" :color="'#ff1d5e'" /> <orbit-spinner :animation-duration="1200" :size="55" :color="'#ff1d5e'" /> <radar-spinner :animation-duration="2000" :size="60" :color="'#ff1d5e'" /> <scaling-squares-spinner :animation-duration="1250" :size="65" :color="'#ff1d5e'" /> <half-circle-spinner :animation-duration="1000" :size="60" :color="'#ff1d5e'" /> <trinity-rings-spinner :animation-duration="1500" :size="66" :color="'#ff1d5e'" /> <fulfilling-square-spinner :animation-duration="4000" :size="50" :color="'#ff1d5e'" /> <circles-to-rhombuses-spinner :animation-duration="1200" :circles-num="3" :circle-size="15" :color="'#ff1d5e'" /> <semipolar-spinner :animation-duration="2000" :size="65" :color="'#ff1d5e'" /> <self-building-square-spinner :animation-duration="6000" :size="40" :color="'#ff1d5e'" /> <swapping-squares-spinner :animation-duration="1000" :size="65" :color="'#ff1d5e'" /> <fulfilling-bouncing-circle-spinner :animation-duration="4000" :size="60" :color="'#ff1d5e'" /> <fingerprint-spinner :animation-duration="1500" :size="64" :color="'#ff1d5e'" /> <spring-spinner :animation-duration="3000" :size="60" :color="'#ff1d5e'" /> <looping-rhombuses-spinner :animation-duration="2500" :rhombus-size="15" :color="'#ff1d5e'" /> <breeding-rhombus-spinner :animation-duration="2000" :size="65" :color="'#ff1d5e'" /> </div> </template> <script> // Importing all required spinners from epic-spinners import { AtomSpinner, FlowerSpinner, PixelSpinner, HollowDotsSpinner, IntersectingCirclesSpinner, OrbitSpinner, RadarSpinner, ScalingSquaresSpinner, HalfCircleSpinner, TrinityRingsSpinner, FulfillingSquareSpinner, CirclesToRhombusesSpinner, SemipolarSpinner, SelfBuildingSquareSpinner, SwappingSquaresSpinner, FulfillingBouncingCircleSpinner, FingerprintSpinner, SpringSpinner, LoopingRhombusesSpinner, BreedingRhombusSpinner, } from 'epic-spinners'; export default { components: { AtomSpinner, FlowerSpinner, PixelSpinner, HollowDotsSpinner, IntersectingCirclesSpinner, OrbitSpinner, RadarSpinner, ScalingSquaresSpinner, HalfCircleSpinner, TrinityRingsSpinner, FulfillingSquareSpinner, CirclesToRhombusesSpinner, SemipolarSpinner, SelfBuildingSquareSpinner, SwappingSquaresSpinner, FulfillingBouncingCircleSpinner, FingerprintSpinner, SpringSpinner, LoopingRhombusesSpinner, BreedingRhombusSpinner, }, }; </script> <style> /* Optional styling for better visual alignment */ #app { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; padding: 20px; background-color: #f4f4f4; } .spinner-wrapper { display: inline-block; } </style> |
