Javascript
【Javascript】CSSスピナーコレクションEpic Spinners
March 9, 2018

Epic Spinnersはvue.jsによるCSSスピナーコレクション。
Vue.js
<template> <div id="app"> <atom-spinner :animation-duration="1000" :size="60" :color="'#ff1d5e'" /> </div> </template> <script> // To use minified css and js files instead of .vue single file components: // import 'epic-spinners/dist/lib/epic-spinners.min.css' // import {AtomSpinner} from 'epic-spinners/dist/lib/epic-spinners.min.js' import {AtomSpinner} from 'epic-spinners' export default { components: { AtomSpinner } } </script>
<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'" /> <atom-spinner :animation-duration="1000" :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'" />
MIT